The way I see it there are two accordion styles.
- Expand and Contract (ec) the one Section where multiple Sections can be Expanded or Contracted.
- Only one Section is Expanded at any given time. (ecp ec paired)
HTML
<button class="link" type="button" onclick ="ec('s1')">Button</button>
<div id="s1" class="hide">
</div>
<button class="link" type="button" onclick ="ec('s2')">Button</button>
<div id="s2" class="hide">
</div>
<div id="s999"></div>
JS
I have two functions one for each the two EC methods.
function ec() is for EC method 1
functions ecp() is for EC method 2, pairs the current selected section with the previous.
Normally obe one of these functions is used on a web page.
The div id="s999" is for the initial value for prev so there is no null value to prev.
The reason I have var disp = div.style.display; is for when the same section is selected as previously. I do not care if prev is expanded or contracted just contracting it is much quicker than an else if to check its display state. But I need to remember what I am doing with the passed id.
If the same section is clicked and I toggle the display state, if it is being expanded the prev toggle would contract it again.
The line of code:
var y=div.offsetTop;window.scrollTo(0, y-64);
Takes the expanded section and puts it at the top of the Browser window. When all are contracted, it scrolls to the very top or the page.
The reason I use an array for the toggle is to eliminate the else if that would otherwise be required.
Working Snippet
var toggle=[]
toggle[''] = 'block';
toggle['none'] = 'block';
toggle['block'] = 'none';
function ec(id){
div = document.getElementById(id);
div.style.display=toggle[div.style.display];
var y=div.offsetTop;window.scrollTo(0, y-24);
}
var prev = document.getElementById('s999');
function ecp(id){
div = document.getElementById(id);
var disp = div.style.display;
prev.style.display='none';
div.style.display=toggle[disp];
prev=div;
var y=div.offsetTop;window.scrollTo(0, y-24);
}body{background:#333;font-size:.8em;}
.btn1,.btn2{padding: .2em;margin:.2em 0 0 0;border-radius: 3px 3px 3px 3px;font: 700 1em Arial,Helvetica,Calibri,sans-serif;overflow: visible;border:1px solid #2985EA;color: #fff;background-color:#2985EA;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);}
.btn1{width:96%;}
.btn2{width:48%;}
h3{margin:0;}
p{margin:.1em .4em;}
.s1,.s2,.s3,.s4{display:none;padding:0;margin:0;}
.s1{color:#f0f;}
.s2{color:#0f0;}
.s3{color:#f00;}
.s4{color:#0ff;}
#s999{min-height:40em;}<!DOCTYPE html>
<html lang="en"><head><title>Expand Contract</title></head><body>
<button class="btn1" type="button" onclick ="ec('s1')">Section One </button><br/>
<div id="s1" class="s1">
<h3>This Section toggles when Section One button is clicked</h3>
<p>Section 1 content<br/>goes here.</p>
</div>
<button class="btn1" type="button" onclick ="ec('s2')">Section Two</button><br/>
<div id="s2" class="s2">
<h3>This Section toggles when Section Two button is clicked</h3>
<p>Section 2 content<br/>goes here.</p>
</div>
<button class="btn2" type="button" onclick ="ecp('s3')">Section Three </button>
<button class="btn2" type="button" onclick ="ecp('s4')">Section Four</button>
<div id="s3" class="s3">
<h3>This Section toggles when Section Three button is clicked<br>And if Expanded will Contract when Button Four is clicked</h3>
<p>Section 3 content<br/>goes here.</p>
</div>
<div id="s4" class="s4">
<h3>This Section toggles when Section Four button is clicked<br>And if Expanded will Contract when Button Three is clicked</h3>
<p>Section 4 content<br/>goes here.</p>
</div>
<div id="s999"></div>
<div style="height:40em"><p> </p></div>
</body></html>