Close other accordions on click (without toggling class)

Question

I'm currently using some code that closely resembles the example this w3schools link, but I can't seem to figure out what to add to the javascript in order to close other tabs when clicking on one of the tabs.

I have gone through a few SO answers regarding closing other accordions on click (such as here) - but they mostly deal with removing classes (".active") from siblings, which (may?) or may not work in this case.

I'm not very familiar with the code but I'm under the impression that it's the JS that's animating the panel sliding down, and not a CSS animation.

Currently my code looks like this : https://jsfiddle.net/joshuacsk/yw7eygxk/ and the JS in question like so:

JS

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < 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 + "px";
    } 
  }
}

Is there any way to close other tabs using the style of code above, or is there any other better way to do this?

Answer 1

You can add:

for(j = 0; j < acc.length; j++) {
    acc[j].nextElementSibling.style.maxHeight = null;
}

to close all tabs. See the snippet at the bottom of my answer.

PS: The animation of the panels slding up/down is CSS, the JavaScript only triggers it by modifying the height.

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    for(j = 0; j < acc.length; j++) {
      acc[j].nextElementSibling.style.maxHeight = null;
    }
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

.accordiontext{
  font-family:futura-pt;
  font-weight:300;
  font-size:11;
}
button{
    font-family:futura-pt;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.2em;
    box-sizing:border-box;
    box-shadow: inset 0 0 0 3px #202020;
    position:relative;
    vertical-align:middle;
    border: 0;
}
button.accordion {
    background-color: #fff;
    color: #202020;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    text-align: left;
    background: linear-gradient(to right, #202020 50%, #ffffff 50%);
    background-size: 205% 100%;
    background-position:right bottom;
    transition:all 1s ease;
}

button.accordion.active, button.accordion:hover {
    background-position:left bottom;
    color: #ffffff;
    
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 8px 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

button.accordion:after {
    content: '\e009'; /* Unicode character before click  */
    color: #202020;
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: normal;
    float: right;
    margin-right: 12px;
    transition: all 0.3s ease-in
   
}

button.accordion.active:after {
    content: "\e006"; /* Unicode character after click */
    color: #ffffff;
}

<div class="accordionholder">
<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>
</div>

Answer 2

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
   for(var j = 0; j < acc.length; j++) {
      acc[j].nextElementSibling.style.maxHeight = null;
      acc[j].classList.remove('active');
    }
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

.accordiontext{
  font-family:futura-pt;
  font-weight:300;
  font-size:11;
}
button{
    font-family:futura-pt;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.2em;
    box-sizing:border-box;
    box-shadow: inset 0 0 0 3px #202020;
    position:relative;
    vertical-align:middle;
    border: 0;
}
button.accordion {
    background-color: #fff;
    color: #202020;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    text-align: left;
    background: linear-gradient(to right, #202020 50%, #ffffff 50%);
    background-size: 205% 100%;
    background-position:right bottom;
    transition:all 1s ease;
}

button.accordion.active, button.accordion:hover {
    background-position:left bottom;
    color: #ffffff;
    
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 8px 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

button.accordion:after {
    content: '\e009'; /* Unicode character before click  */
    color: #202020;
    font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: normal;
    float: right;
    margin-right: 12px;
    transition: all 0.3s ease-in
   
}

button.accordion.active:after {
    content: "\e006"; /* Unicode character after click */
    color: #ffffff;
}

<div class="accordionholder">
<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>

<button class="accordion">Titleasdasdasd</button> <!--title-->
<div class="panel">
  <p  class="accordiontext">Lorem ipsum</p> <!--content-->
</div>
</div>