Как убедиться, что гармошка закрывается, когда вы выбираете другой, чтобы открыть

Question

Я зашла в тупик, пытаясь понять, как ввести требуемый код, чтобы активный аккордеон закрывался при нажатии на другой.

Я видел другие скрипты, которые показывают работающие решения, но не знаю, как вписать их в мой текущий код, несмотря на попытки (я новичок в 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

Когда вы нажимаете на аккордеон и добавляете к нему класс .active, прямо перед этим шагом вы должны проверить, не добавлен ли к нему другой класс аккордеона .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";
    } 
  }
}