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