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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggle an element's display(show/hide multiple display help!)

    Greetings.

    I will explain my problem as clearly as possible, i'm not very good with java, and am having a hard time with this particular function.

    I basically want several show/hide toggles. When you click one link on a page (or picture in my case), I want it to show the hidden text. then for another part of the site, when you click on a different picture it will show the hidden text for that particular section, different from the first toggle. I need three of these, all within the same shtml .txt include. (All able to be shown/hidden on the same page, whenever clicked.)

    I have the code for one of the toggles, and have attempted to create another, but the second toggle keeps showing the first. I do better with examples, and google wasn't able to provide me with any =P Any examples of showing multiple toggle elements would be greatly apreciated. here is my example:


    Code:
    <td height="19"><div align="right"> <font color="#999999" size="2" face="Arial"><a href="javascript: toggle()"><img src="images/games.jpg" width="133" height="29" border="0"></a></font> 
            <div align="left" id='div1' style='display:none'> 
              <table width="188" height="133" border="0" cellpadding="0" cellspacing="0" dwcopytype="CopyTableRow">
                <tr> 
                  <td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial"><a href="http://www.dothackportal.com/infection/index.shtml">.hack//Infection</a></font></div></td>
                </tr>
                <tr> 
                  <td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Mutation</font></div></td>
                </tr>
                <tr> 
                  <td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Outbreak</font></div></td>
                </tr>
                <tr> 
                  <td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Quarantine</font></div></td>
                </tr>
                <tr> 
                  <td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial"><a href="http://www.dothackportal.com/gurebirth/index.shtml">.hack//G.U. 
                      Rebirth </a></font></div></td>
                </tr>
                <tr> 
                  <td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//G.U. 
                      Reminise </font></div></td>
                </tr>
                <tr> 
                  <td height="19"><div align="right"><font color="#CCCCCC" size="2" face="Arial">.hack//Redemption</font></div></td>
                </tr>
              </table>
            </div>
            <div align="left"><font color="#CCCCCC"> 
              <script>
    function toggle(){
    	var div1 = document.getElementById('div1')
    	if (div1.style.display == 'none') {
    		div1.style.display = 'block'
    	} else {
    		div1.style.display = 'none'
    	}
    }
    </script>
              </font></div>
          </div></td>
    p.s. For those wondering, this is for a game website for .hack. Thanks!
    Last edited by Icy Garnet; 03-21-2008 at 05:43 AM.

  • #2
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hard to know what you're doing wrong without an example of your multiple toggles, but here's some code based on yours that works (at least on mine!):

    <div align="left" id='div1' style='display:none'>Contents of div1</div>
    <div align="left" id='div2' style='display:none'>Contents of div2</div>
    <div align="left" id='div3' style='display:none'>Contents of div3</div>
    <button onclick="toggle(1)">Toggle div 1</button>
    <button onclick="toggle(2)">Toggle div 2</button>
    <button onclick="toggle(3)">Toggle div 3</button>
    <script>
    function toggle(x){
    var divx = document.getElementById('div'+x)
    if (divx.style.display == 'none') {
    divx.style.display = 'block'
    } else {
    divx.style.display = 'none'
    }
    }
    </script>


  •  

    Posting Permissions

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