Javascript: close all accordions when one is clicked?

Question

I'm basically trying to close all the accordions close and only keep one of them open which was clicked.

So, in short term, only keep one tab open.

This is what I have so far:

https://jsfiddle.net/gymzfg9r/2/

and this is the javascript:

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");
  }
}

Could someone please advise on this?

Answer 1

insert code for close others:

  this.classList.toggle("active");

  var arr = document.getElementsByClassName("show");
  for (j = 0; j < arr.length; j++) {
      if(this.nextElementSibling != arr[j])
         arr[j].classList.toggle("show");
  }


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

Answer 2

this do the job , but i am pretty sure this is a terrible way to do it, just cant recall a better one right now

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

function closeEverything() {
    var openElements = document.getElementsByClassName("active");
  if(openElements.length) {
    for(var i = 0; i < openElements.length; i++) {
        openElements[i].nextElementSibling.classList.toggle("show");
        openElements[i].classList.toggle("active"); 
     }
    }
}

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