title: HTML Nested Accordion
body: <p>I surfed on many websites and found a way to add nested accordion in HTML as in the following example. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 + "5000px";
      } 
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="accordion"&gt;Accordion 1&lt;/button&gt;
  &lt;div class="panel"&gt;
      &lt;button class="accordion"&gt;Accordion 2&lt;/button&gt;
      &lt;div class="panel"&gt;
          &lt;button class="accordion"&gt;Accordion 3&lt;/button&gt;
          &lt;div class="panel"&gt;
              &lt;p&gt;
                  &lt;li&gt;List 1&lt;/li&gt;
                  &lt;li&gt;List 2&lt;/li&gt;
              &lt;/p&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when I use the above way to add the nested accordion, when we open all the accordions then collapse the uppermost one, it collapses but not the inner ones.</p>
  
  <p>Please let me know if there is a way to collapse all the accordions when collapsing the outermost one.</p>