Nicolás Muiño Nicolás Muiño - 2 months ago 9
Javascript Question

How to close an accordion tab when clicking another one?

I have this rather 'custom' accordion that allows me to add a class on the opened item (color).

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.

Here's my current code

HTML

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

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

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


JS

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}


LIVE DEMO

Answer

Working fiddle

You remove active class from all the .accordion buttons when you click then active the clicked one :

$('.accordion').removeClass('active');

Also remove the show class from all the panels then add it to the consirned one :

$('.panel').removeClass('show');

NOTE : It will be better to put the function out of the loop (e.g click_action()) then just call it inside.

You could also take a look to the full jQuery solution Fiddle HERE.

Hope this helps.

var acc = document.getElementsByClassName("accordion");
var i;

function click_action(){
  $('.accordion').removeClass('active');
  $('.panel').removeClass('show');

  this.classList.toggle("active");
  this.nextElementSibling.classList.toggle("show");
}

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = click_action;
}
button.accordion {
  background-color: #fff;
  cursor: pointer;
  padding: 0px 0 8px 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  border-bottom: 1px solid #ccc;
}

button.accordion.active, button.accordion:hover {
  color: #f06100
}

button.accordion:before {
  content: '\02795';
  font-size: 9px;
  float: left;
  margin-left: 0px;
  margin-right: 10px;
  margin-top: 7px;
}

button.accordion.active:before {
  content: "\2796";
}

div.panel {
  background-color: white;
  max-height: 0;
  padding-left: 15px;
  overflow: hidden;
  padding-top: 0px;
  border-bottom: 4px solid #ccc;
  transition: 0.6s ease-in-out;
  opacity: 0;
  margin-bottom: 8px;
}

.panel-icon {
  margin-right: 10px;
}

.panel h5 {
  font-size: 15px;
  line-height: 23px;
  margin-top: 5px;
  margin-bottom: 0px;
  display: inline-block;
  color: #2d2d2d
}

.panel p {
  font-size: 15px;
  line-height: 23px;
  padding: 15px 30px 20px 0;
  color: #2d2d2d
}

div.panel.show {
  opacity: 1;
  max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Engagement Editor</button>
<div class="panel">
  <p>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.</p>
</div><!-- /.end of job post -->

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

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