Click of input box accordion is expanding

Question

i am using a javascript function to eexpand and collapse of accordion. i want to expand one item at a time and alos when i try to add some text into input box then also accordion is expanding. pls refer ''''https:

i want except from the input box, wherever i clicked on the heading button, accordion will expand

Answer 1

在你当前的代码片段中，你正在改变点击面板的样式，而没有对已经打开的手风琴做任何事情。你需要更新其他打开的手风琴的样式，并使其隐藏。

所以我更新了那段代码，使用classes，在点击时从所有面板中移除classes，并为点击的面板切换。

以下代码将确保在同一时间只有一个手风琴被打开

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    // get list of panels
    const panels = document.getElementsByClassName('panel');
    // get panel for clicked button
    var panel = this.nextElementSibling;
    for(let i = 0; i < panels.length; i++){
      // if panel is not equal to clicked panel then remove class
      if(panel != panels[i]){
        panels[i].classList.remove('active-panel');
      }     
    }
    this.classList.toggle("active");    
    panel.classList.toggle('active-panel');
  });
}

工作中的jsfiddle链接 https:/jsfiddle.net2f9ndcer