Welcome to WebmasterWorld Guest from 34.238.194.166

Forum Moderators: open

Message Too Old, No Replies

expand collapse

in one cell

     
8:15 pm on Jul 25, 2007 (gmt 0)

New User

10+ Year Member

joined:May 27, 2007
posts:9
votes: 0


sorry, I am positive that this has probaly been addressed before, I can't seem to find it though.

i have a table row that looks like the below

<tr>
<td>
title of row
<br /><br />
long paragraph of text goes here
</td>
</tr>

when the page loads "long paragraph of text goes here" should be hidden.

so when someone clicks on "title of row" it expands to show "long paragraph of text goes here".

if they click "title of row" again it should re-hide the "long paragraph of text goes here"

I've been searching the internet and this forum but can't seem to find what i need. I know this must be possible in javascript (right?) I have about 7 rows i need to do this too.

lil help? thanks. Once again if this has been done to death here i'm sorry, but what i have found doesn't seem to be what i need

9:08 pm on July 25, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


A search for "toggle" might yield more results. But here's a basic version using the Yahoo UI Library for DOM and Event manipulation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<style type="text/css">
.hidden {
display: none;
}
.shown {
display: block;
}
</style>
<title></title>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
YAHOO.util.Event.on(window, 'load', function() {
// Hide all of the paragraphs in foo
var pList = document.getElementById("foo").getElementsByTagName("p");
// Hide them all
YAHOO.util.Dom.addClass(pList, 'hidden');
// Get all of the links in "foo"
var aList = document.getElementById("foo").getElementsByTagName("a");
// Attach an event listener to the links
YAHOO.util.Event.on(aList, 'click', function(e) {
YAHOO.util.Event.stopEvent(e);
// Get the paragraph that this link points to
var p = document.getElementById((this.hash).substr(1));
if (YAHOO.util.Dom.hasClass(p, 'hidden')) {
YAHOO.util.Dom.replaceClass(p, 'hidden', 'shown');
}
else {
YAHOO.util.Dom.replaceClass(p, 'shown', 'hidden');
}
});
});
</script>
</head>
<body>
<table id="foo">
<tbody>
<tr>
<td>
<a href="#thisRow">title of row</a>
<br><br>
<p id="thisRow">
long paragraph of text goes here
</p>
</td>
<td>
<a href="#thatRow">title of row</a>
<br><br>
<p id="thatRow">
long paragraph of text goes here
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
9:11 pm on July 25, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


function togDisplay(id){ 
var style = document.getElementById(id).style;
style.display= (style.display=="block")
? "none":"block";
}

------------------------

<tr> 
<td>
<h5 onclick="togDisplay('text0')">title of row</h5>
<div id="text0">long paragraph of text goes here</div>
</td>
</tr>

May be better done with a className swap on the TD, but this'll do for now.
This script assumes that the long text is initially hidden.

9:36 pm on July 25, 2007 (gmt 0)

New User

10+ Year Member

joined:May 27, 2007
posts:9
votes: 0


Thank you both for the quick and great replies.

for some reason, i still can't get it to work?

Fotiman, i copied and pasted your code directly into a test page with no results, then i tried yours bernard, by implementing it into the actual page I wish to use it on.... still nothing.

sorry, i'm sure i'm doing something wrong. I just can't figure out what that something is

any ideas? thanks a million!

9:45 pm on July 25, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


<html><head><title>TEST</title> 
<style type="text/css">
#text0{display:none;}
h5.textHead{cursor:pointer;cursor:hand/*IE*/;}
</style>
<script>
function togDisplay(id){
var style = document.getElementById(id).style;
style.display= (style.display=="block")
? "none":"block";
}
</script>
</head>
<body>

<table>
<tr>
<td>
<h5 class="textHead" onclick="togDisplay('text0')">title of row</h5>
<div id="text0">long paragraph of text goes here</div>
</td>
</tr>
</body>
</html>

6:15 am on July 26, 2007 (gmt 0)

New User

10+ Year Member

joined:May 27, 2007
posts:9
votes: 0


Thats great!

Thanks, That did the trick.

1:31 pm on July 26, 2007 (gmt 0)

New User

10+ Year Member

joined:May 27, 2007
posts:9
votes: 0


i just wanted to say it again. Thanks alot! You two have no idea how long I've been trying to do this. If I could ask one more favor. If you know a good javascript site to learn at please PM the link. Thanks again.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members