title: Only open one accordion tab at one time
body: <p>I have an accordion that works really well, it looks good on the site and works as it should. However, I'm trying to add some more JavaScript functionality to it, to make it more it look more professional.</p>
  
  <p>Currently, the accordion allows you to have multiple panels open at one time i.e. if I open one tab, and then open another tab, both tabs will be open at the same time. And the only way to close these panels, is to re-click on the header.</p>
  
  <p>What I would like is some JavaScript code that prevents multiple tabs from being open at one time, so if I click on a new panel, it should close the existing open panel first. Here is my HTML code for the accordion:</p>
  
  <pre><code>&lt;div class="accordion"&gt;&lt;b&gt;Heading 1&lt;/b&gt;&lt;/div&gt;
  &lt;div class="panel"&gt;
      &lt;p class="text-light"&gt;Text 1&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="accordion"&gt;&lt;b&gt;Heading 2&lt;/b&gt;&lt;/div&gt;
  &lt;div class="panel"&gt;
      &lt;p class="text-light"&gt;Text 2&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my JavaScript code in a separate JavaScript file which currently allows multiple tabs to be open at one time</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");
          this.nextElementSibling.classList.toggle("show");
      }
  }
  </code></pre>
  
  <p>Not sure if you need all the CSS, but heres the CSS for showing the panel</p>
  
  <pre><code>div.panel.show {
      display: block !important;
  }
  </code></pre>
  
  <p>Hopefully someone can help! Thanks in advance!</p>