1. Registered User
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>
<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>
<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>
<br>
Last edited by jedaisoul; 08-05-2014 at 05:06 PM. Reason: code tags added

2. Registered User
Join Date
Oct 2013
Posts
1,363
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. Registered User
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. Registered User
Join Date
Oct 2013
Posts
1,363
HTML Code:
<!DOCTYPE html>
<html>
<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>
<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.