title: How to automatically close an accordion when opening another?
body: <p>I have an accordion that includes some nested accordions that I'm intending to use an a mobile navigation. I'm not the best with JavaScript, so I've had to find tutorials to get me to where I am now. All I need now is for all other accordions to close when a different one is open.</p>
  
  <p>Here's the HTML I have so far:</p>
  
  <pre><code>&lt;div id="mobile-nav"&gt;
    &lt;button class="accordion"&gt;Section 1&lt;/button&gt;
    &lt;div class="panel"&gt;
      &lt;button class="accordion"&gt;Subsection&lt;/button&gt;
      &lt;div class="panel"&gt;
        &lt;ul class="nav-list"&gt;
          &lt;li class="nav-item"&gt;Option 1&lt;/li&gt;
          &lt;li class="nav-item"&gt;Option 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="accordion"&gt;Section 2&lt;/button&gt;
    &lt;div class="panel"&gt;
      &lt;button class="accordion"&gt;Subsection 1&lt;/button&gt;
      &lt;div class="panel"&gt;
        &lt;ul class="nav-list"&gt;
          &lt;li class="nav-item"&gt;Option 1&lt;/li&gt;
          &lt;li class="nav-item"&gt;Option 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;button class="accordion"&gt;Subsection 2&lt;/button&gt;
      &lt;div class="panel"&gt;
        &lt;ul class="nav-list"&gt;
          &lt;li class="nav-item"&gt;Option 1&lt;/li&gt;
          &lt;li class="nav-item"&gt;Option 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;button class="accordion"&gt;Subsection 3&lt;/button&gt;
      &lt;div class="panel"&gt;
        &lt;ul class="nav-list"&gt;
          &lt;li class="nav-item"&gt;Option 1&lt;/li&gt;
          &lt;li class="nav-item"&gt;Option 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the Javascript that I've cobbled together from tutorials and forums:</p>
  
  <pre><code>var acc = document.getElementsByClassName("accordion");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var parent = this.parentElement;
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
        parent.style.maxHeight = parseInt(parent.style.maxHeight) + panel.scrollHeight + "px";
      } 
    });
  }
  </code></pre>
  
  <p>What's giving me trouble is working with the nested accordions, and making sure that they're closing as well.</p>