dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: div toggle (with more than one div)

  1. #1
    Join Date
    Jun 2004
    Posts
    135

    Question div toggle (with more than one div)

    I'm using the following code to toggle a div:

    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>

    Code:
    <a id="displayText" href="javascript:toggle();">show</a> 
    <div id="toggleText" style="display: none">text to show/hide goes here</div>
    This works great, but I want to use it more than once on my page to show/hide other things. What do I need to change so that it won't keep showing/hiding only the first div every time?
    Thanks.

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,805

    Lightbulb

    Use the following changes ...

    Code:
    <script language="javascript"> 
    function toggle(ids) {
    	var ele = document.getElementById(ids);
    	if (ele.style.display == "block") { ele.style.display = "none"; }
    	else { ele.style.display = "block"; }
    } 
    </script>
    and

    Code:
    <a id="displayText" href="javascript:toggle('toggleText');">show</a> 
    <div id="toggleText" style="display: none">text to show/hide goes here</div>
    Be sure to use unique <div> tag id=??? values

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    You haven't given details of your page layout so maybe use this demo as a guide.

    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>
            <style type="text/css">
                #container div {
                    display: none;
                }
                #container a {
                    display: block;
                }
            </style>
            <script type="text/javascript">
                function toggleDiv(obj){
                    oShowHideDivs[obj.num].style.display = (oShowHideDivs[obj.num].style.display == 'block')? 'none': 'block';
                    obj.innerHTML = (oShowHideDivs[obj.num].style.display == 'block')? 'Hide div '+(obj.num+1):'Show div '+(obj.num+1);
                }
                window.onload=function(){
                    oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
                    var oLinks = document.getElementById('container').getElementsByTagName('a');
                    for(i=0; i < oLinks.length; i++){
                        oLinks[i].num = i;
                        oLinks[i].onclick=function(){
                            toggleDiv(this);
                            return false;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div id="container">
                <a href="#">show div 1</a>
                <div>This is div1</div>
                <a href="#">show div 2</a>
                <div>This is div2</div>
                <a href="#">show div 3</a>
                <div>This is div3</div>
            </div>
        </body>
    </html>
    Last edited by tirna; 02-28-2011 at 09:32 PM.

  4. #4
    Join Date
    Jun 2004
    Posts
    135
    Quote Originally Posted by JMRKER View Post
    Use the following changes ...

    Code:
    <script language="javascript"> 
    function toggle(ids) {
    	var ele = document.getElementById(ids);
    	if (ele.style.display == "block") { ele.style.display = "none"; }
    	else { ele.style.display = "block"; }
    } 
    </script>
    and

    Code:
    <a id="displayText" href="javascript:toggle('toggleText');">show</a> 
    <div id="toggleText" style="display: none">text to show/hide goes here</div>
    Be sure to use unique <div> tag id=??? values
    This works, but it removes the ability for the link to switch between saying "show" and saying "hide".

  5. #5
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,805

    Lightbulb

    Quote Originally Posted by AliasJaneDoe View Post
    This works, but it removes the ability for the link to switch between saying "show" and saying "hide".
    OK, so put it back in. (2 line change)
    I did not see the purpose of the message change, but if you have one, go for it!

  6. #6
    Join Date
    Dec 2010
    Posts
    207
    Just follow this simple example. Pass all the target element IDs to the function as shown, and ID all the links or other triggering elements as "toggle" + the ID of the target element.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Multiple Element display Toggle</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <p>
    <input type = 'button' value = 'ONE' id='toggleOne'><br>
    <a href='#' id='toggleTwo'>TWO</a><br>
    <a href='#' id='toggleThree'>THREE</a><br>
    
    <div id="One">I am element ONE</div>
    <p>
    <span id="Two" style='display:none'>I am element TWO</span>
    
    <form id="Three" action=''>
     <p>I am element THREE
     <input type="text">
    </form>
    
    <script type="text/javascript">
    
    function hyperToggle()
    {
     var args = hyperToggle.arguments, 
         anArg,    
         aTrig, 
         anElem;  
       
     for( var i = 0; ( anArg = args[ i ] ); i++ )
      if( ( aTrig = document.getElementById( 'toggle' + anArg ) ) && ( anElem = document.getElementById( anArg ) ) )
       aTrig.onclick = (function( elem ){ return function(){ elem.style.display = ( elem.style.display != 'none' ? 'none' : '' ); return false;} })( anElem );   
    }
    
    hyperToggle( "One", "Two", "Three" );
    
    </script>
    </body>
    </html>


    Q: I found this code...
    A: Then find its author.

  7. #7
    Join Date
    Jun 2004
    Posts
    135
    Quote Originally Posted by JMRKER View Post
    OK, so put it back in. (2 line change)
    I did not see the purpose of the message change, but if you have one, go for it!
    I somehow managed to mess something up when I was putting those lines back. Would you mind showing me the proper way to do it so I can figure out my mistake? Sorry, but I'm still newbie level at all this. Thanks so much for all your help.

  8. #8
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,805
    Post your non-working code so we can show you what to change.

  9. #9
    Join Date
    Jun 2004
    Posts
    135
    Quote Originally Posted by JMRKER View Post
    Post your non-working code so we can show you what to change.
    I didn't save my changes since they weren't working, so my code is back to your version without the show/hide change.

    Code:
    Code:
    <script language="javascript"> 
    function toggle(ids) {
    	var ele = document.getElementById(ids);
    	if (ele.style.display == "block") { ele.style.display = "none"; }
    	else { ele.style.display = "block"; }
    } 
    </script>
    and

    Code:
    Code:
    <a id="displayText" href="javascript:toggle('toggleText');">show</a> 
    <div id="toggleText" style="display: none">text to show/hide goes here</div>

  10. #10
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,805

    Arrow

    Code:
    <script language="javascript"> 
    function toggle(ids) {
      var ele = document.getElementById(ids);
      if (ele.style.display == "block") {
        ele.style.display = "none"; 
        text.innerHTML = "show";
      } else {
         ele.style.display = "block";
         text.innerHTML = "hide";
      }
    } 
    </script>
    and

    Code:
    <a id="displayText" href="javascript:void(0)" onclick="toggle('toggleText')">show</a> 
    <div id="toggleText" style="display: none">text to show/hide goes here</div>

  11. #11
    Join Date
    Jun 2004
    Posts
    135
    Quote Originally Posted by JMRKER View Post
    Code:
    <script language="javascript"> 
    function toggle(ids) {
      var ele = document.getElementById(ids);
      if (ele.style.display == "block") {
        ele.style.display = "none"; 
        text.innerHTML = "show";
      } else {
         ele.style.display = "block";
         text.innerHTML = "hide";
      }
    } 
    </script>
    and

    Code:
    <a id="displayText" href="javascript:void(0)" onclick="toggle('toggleText')">show</a> 
    <div id="toggleText" style="display: none">text to show/hide goes here</div>
    I just tried this, but it's still always saying "show" and not switching to "hide."

  12. #12
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,805

    Lightbulb

    I'm not sure I understand the purpose of your code, but this might be a possible solution.
    Code:
    <html>
    <head>
    <title> Problem </title>
    <script language="javascript"> 
    // From: http://www.webdeveloper.com/forum/showthread.php?p=1143146#post1143146
    
    function toggle(ids) {
      var ele = document.getElementById(ids);
      if (ele.style.display == "block") {
        ele.style.display = "inline"; 
        ele.innerHTML = "<br>show";
      } else {
        ele.style.display = "block";
        ele.innerHTML = "hide";
      }
    } 
    </script>
    </head>
    <body>
    <a id="displayText" href="javascript:void(0)" onclick="toggle('toggleText')">show</a> 
    <div id="toggleText" style="display:block">text to show/hide goes here</div>
    </body>
    </html>

  13. #13
    Join Date
    Jun 2004
    Posts
    135
    Quote Originally Posted by JMRKER View Post
    I'm not sure I understand the purpose of your code,
    The purpose of the code is to toggle the information about videos on and off. Example: http://www.different-dimension.com/A...EOS/test7.html
    But instead of merely saying "info," I want it to say "show info" or "hide info."

  14. #14
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,805

    Question

    Quote Originally Posted by AliasJaneDoe View Post
    The purpose of the code is to toggle the information about videos on and off. Example: http://www.different-dimension.com/A...EOS/test7.html
    But instead of merely saying "info," I want it to say "show info" or "hide info."
    So, can you use the script provided to do what you want?

  15. #15
    Join Date
    Jun 2004
    Posts
    135
    Quote Originally Posted by JMRKER View Post
    So, can you use the script provided to do what you want?
    No. I tried your last version of the code, and it starts with the hidden text showing, then when you click "show" it changes the text field to say "show" also. If you keep clicking, it toggles the text field between saying "show" and "hide" instead of changing itself.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles