...

View Full Version : Problem With Show/Hide DIV



owdy-88
06-02-2009, 03:39 PM
Hi Guys,

I'm very new to JavaScript, so please excuse any form of poor lingo or description.

I have a table with three columns (and about 20+ rows). The third column has embedded javascript to show/hide additional information. It works, however when I try to show/hide information on a different table row (except the top), ONLY the top row opens/shows. Here's my script:



<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>


and here's my HTML:


</head>
<body>
<h2>Beaus CD Collection</h2>
<table border="1">
<tr bgcolor="#99CCCC">
<th>Artist:</th>
<th>Album Title:</th>
<th>More Information:</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="ARTIST"/></td>
<td><xsl:value-of select="TITLE"/></td>
<td>

<a id="displayText" href="javascript:toggle();">Show</a>
<div id="toggleText" style="display: none">
<ul>
<li>Country: <xsl:value-of select="COUNTRY"/></li>
<li>Record Company: <xsl:value-of select="COMPANY"/></li>
<li>Price: <xsl:value-of select="PRICE"/></li>
<li>Year of Release: <xsl:value-of select="YEAR"/></li>
</ul></div>

</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>


Any ideas or thoughts? I didn't form this script myself - I just grabbed it online from a separate source. Try it yourself and you'll see what I'm talking about. Thanks for your help!

vwphillips
06-02-2009, 04:13 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="javascript">
function toggle(text) {
var ele = text.parentNode.getElementsByTagName('DIV')[0];
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script></head>

<body>
<h2>Beaus CD Collection</h2>
<table border="1">
<tr bgcolor="#99CCCC">
<th>Artist:</th>
<th>Album Title:</th>
<th>More Information:</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="ARTIST"/></td>
<td><xsl:value-of select="TITLE"/></td>
<td>

<a href="#" onclick="toggle(this); return false;">Show</a>
<div style="display: none">
<ul>
<li>Country: <xsl:value-of select="COUNTRY"/></li>
<li>Record Company: <xsl:value-of select="COMPANY"/></li>
<li>Price: <xsl:value-of select="PRICE"/></li>
<li>Year of Release: <xsl:value-of select="YEAR"/></li>
</ul></div>

</td>
</tr>
<tr>
<td><xsl:value-of select="ARTIST"/></td>
<td><xsl:value-of select="TITLE"/></td>
<td>

<a href="#" onclick="toggle(this); return false;">Show</a>
<div style="display: none">
<ul>
<li>Country: <xsl:value-of select="COUNTRY"/></li>
<li>Record Company: <xsl:value-of select="COMPANY"/></li>
<li>Price: <xsl:value-of select="PRICE"/></li>
<li>Year of Release: <xsl:value-of select="YEAR"/></li>
</ul></div>

</td>
</tr>
</xsl:for-each>
</table>

</body>

</html>

owdy-88
06-02-2009, 05:04 PM
Thanks heaps vsphillips - much appreciated! Nice to see a Christian on the boards ;)

cheers!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum