How to close an accordion tab when clicking another one?
<p>I have this rather 'custom' accordion that allows me to add a class on the opened item (color).</p>

<p>But I'm still missing the mentioned feature: I want to auto-close all opened tabs except the one I'm clicking, so they don't pile up.</p>

<p>Here's my current code</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;button class="accordion"&gt;Engagement Editor&lt;/button&gt;
&lt;div class="panel"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;&lt;!-- /.end of job post --&gt;

&lt;button class="accordion"&gt;Partnership &amp; Business Development Lead&lt;/button&gt;
&lt;div id="foo" class="panel"&gt;
 &lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;&lt;!-- /.end of job post --&gt;

&lt;button class="accordion"&gt;Assistant Video Editor&lt;/button&gt;
&lt;div id="foo" class="panel"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;&lt;!-- /.end of job post --&gt;
</code></pre>

<p><strong>JS</strong></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><strong><a href="http://jsfiddle.net/qzkgjjzo/" rel="nofollow">LIVE DEMO</a></strong></p>