Forum Moderators: open
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
<!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>
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.
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!
<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>
Thanks, That did the trick.
