title: W3 Accordion - Auto close sections and open/close all
body: <p>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.</p>
  
  <p>JS: </p>
  
  <pre><code>var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; 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";
      } 
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/fgosqfcw/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <ol>
  <li><p>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.</p></li>
  <li><p>Is there any way to create a "open all" and a "close all" sections button/link?</p></li>
  </ol>