аккордеон | Щелчок поля ввода аккордеон расширяется

Question

Я использую функцию javascript для расширения и разрушения аккордеона. Я хочу расширять по одному элементу за раз, и когда я пытаюсь добавить текст в поле ввода, расширяется и аккордеон. Пожалуйста, обратитесь '' '' https://jsfiddle.net/nehajain/d8ozr9m4/

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

Answer 1

В своем текущем фрагменте кода вы меняете стили для панели, на которую нажимали, и ничего не делаете, чтобы открыть аккордеон. Вам нужно обновить стили для других открытых аккордеонов и сделать их скрытыми.

Итак, я обновил этот код, чтобы использовать классы и по щелчку удалять классы со всех панелей и переключаться для панели, по которой щелкали.

Следующий код гарантирует, что одновременно открыт только один аккордеон

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.net/2f9ndcer/