Javascript：單擊時關閉所有手風琴？

Question

我基本上是在嘗試關閉所有手風琴，只打開其中一個被單擊的手風琴。

因此，在短期內，只能保持打開一個選項卡。

這是我到目前為止的內容：

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

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

有人可以為此提供建議嗎？

Answer 1

插入代碼以關閉其他人：

  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

這可以完成工作，但是我很確定這是一種糟糕的方法，只是現在還想不起更好的方法

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