W3 Accordion - Auto close sections and open/close all

Question

When searching on Google I just find alternative accordions with unnecessary long html and css code that's why I want to use this one.

JS:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

Fiddle

1. How can I make sections close automatically when another is opened? If Section 1 is open and I click Section 3 then Section 1 should close for example. All sections closed on page load like it is now and only one section open at any time.

2. Is there any way to create a "open all" and a "close all" sections button/link?

Answer 1

I wrote open all and close all functions by looping over the elements and opening and closing them as you had.

In order to close the other sections when you open one, I just ran closeAll() before the selected one opens.

Edit wrapped closeAll() in conditional so that can close an active section by clicking on it.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {

	if( !this.classList.contains('active') ){
    	closeAll();
    }
	
  this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

function openAll(){
    for (i = 0; i < acc.length; i++) {
    	acc[i].classList.add("active");
        acc[i].nextElementSibling.style.maxHeight = acc[i].nextElementSibling.scrollHeight + "px";
    }
}

function closeAll(){
	 for (i = 0; i < acc.length; i++) {
    	acc[i].classList.remove("active");
        acc[i].nextElementSibling.style.maxHeight = null;
    }
}

document.getElementById( 'openAll' ).addEventListener( 'click', openAll);
document.getElementById( 'closeAll' ).addEventListener( 'click', closeAll);

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button id="openAll">Open All</button>
<button id="closeAll">Close All</button>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>