javascript - 当您选择打开另一个 Accordion 时如何确保 Accordion 关闭

Question

我在尝试弄清楚如何输入所需的代码以确保事件的 Accordion 在单击另一个 Accordion 时会关闭时感到困惑。

我已经看到其他 fiddle 展示了可行的解决方案，但尽管尝试了但不知道如何将其融入我当前的代码(我是 Javascript 的新手)。

HTML:

<button class="syo-accordion"><h3>Sample Heading</h3></button>
     <div class="syo-panel"> <p>Some text example</p></div>

Javascript:

var acc = document.getElementsByClassName("syo-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";
    } 
  }
}

Answer 1

当单击 Accordion 并向其添加 .active 类时，在此步骤之前，您应该检查其他 Accordion 是否已经添加了 .active 类并且删除它。

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {

    for (const accordion of acc) { // looping through all of the accorion
        if (accordion.classList.contains("active")) {
            accordion.classList.remove("active"); // removing class if it contains the active class
        }
    }

    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}