Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post Problem With Show/Hide DIV

    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:


    Code:
    <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:

    Code:
    </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!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks heaps vsphillips - much appreciated! Nice to see a Christian on the boards

    cheers!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •