www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to add expand/collapse all option

  1. #1
    Join Date
    Aug 2014
    Posts
    3

    How to add expand/collapse all option

    This code works perfect except you have to individually expand each div with the Toggle Button.
    How to add toggle/expand/collapse ALL option??
    Code:
    First line First line First line First line First line First line First line First line First line
    <div id="para1" style="display:none">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <br>
    
    First line First line First line First line First line First line First line First line First line
    <div id="para1" style="display:none">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <br>
    
    First line First line First line First line First line First line First line First line First line
    <div id="para1" style="display:none">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <br>
    Last edited by jedaisoul; 08-05-2014 at 05:06 PM. Reason: code tags added

  2. #2
    Join Date
    Oct 2013
    Posts
    483
    Element IDs must be unique. You cannot reuse an ID as in <div id="para1"> being used 3 times in your posted HTML.

    That's the rule. You have to live with it.

  3. #3
    Join Date
    Aug 2014
    Posts
    3
    Okay so once I change the <div id="para1"> to <div id="para1"><div id="para2"><div id="para3">

    How can I add a button to expand and collapse all 3 <div id="para1"><div id="para2"><div id="para3">??? Currently each section has a button to expand and collapse each section individually. I would like to also have a button above the 3 div id's that expand/collapse all 3 sections

  4. #4
    Join Date
    Oct 2013
    Posts
    483
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Expand or Collapse DIVs</title>
    <style>
    .hide{
    	display:none;
    }
    .show{
    	display:block;
    }
    </style>
    <script>
    function toggleMe(el,p){
    	if (el.innerText == 'Show'){
    		p.className = 'show';
    		el.innerText = 'Hide';
    	}
    	else{
    		p.className = 'hide';
    		el.innerText = 'Show';
    	}
    }
    
    function toggleAll(el,p1,p2,p3,b1,b2,b3){
    	if (el.innerText == 'Show All'){
    		p1.className = 'show';
    		p2.className = 'show';
    		p3.className = 'show';
    		b1.innerText = 'Hide';
    		b2.innerText = 'Hide';
    		b3.innerText = 'Hide';
    //		el.innerText = 'Hide All';
    	}
    	else{
    		p1.className = 'hide';
    		p2.className = 'hide';
    		p3.className = 'hide';
    		b1.innerText = 'Show';
    		b2.innerText = 'Show';
    		b3.innerText = 'Show';
    //		el.innerText = 'Show All';
    	}
    }
    </script>
    </head>
    <body>
    <button onclick="toggleAll(this,para1,para2,para3,b1,b2,b3)">Show All</button> <button onclick="toggleAll(this,para1,para2,para3,b1,b2,b3)">Hide All</button><br>
    First line First line First line First line First line First line First line First line First line
    <div id="para1" class="hide">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <button id="b1" onclick="toggleMe(this,para1)">Show</button>
    <br>
    
    First line First line First line First line First line First line First line First line First line
    <div id="para2" class="hide">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <button id="b2" onclick="toggleMe(this,para2)">Show</button>
    <br>
    
    First line First line First line First line First line First line First line First line First line
    <div id="para3" class="hide">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <br>
    <button id="b3" onclick="toggleMe(this,para3)">Show</button>
    
    </body>
    </html>
    A few notes:
    • For the sake of clarity and brevity I removed a whole mess of "blah"s. Add back as needed.
    • <input> really shouldn't be used outside of a form -- even though it validates in HTML5 . That's why the <button> tag exists, and why I changed your inputs to that.
    • "Toggle" means nothing. Really. Toggle what? Tell the user what clicking a button will do. Hence my button text.
    • Following on to the previous point -- Instead of one "Toggle All" button I used 2 because it makes a lot more sense to the user. "Show all" (or even "Toggle All") when everything is already showing makes no sense. Especially if you have to click the button twice to do something. If you really need only one button, delete the "Hide All" button and uncomment the two lines in the toggleAll function.
    Last edited by Kevin2; 08-07-2014 at 01:53 PM.

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