Как в аккордеоне закрыть открытый элемент?

Question

[suprascapularis69]

Здравствуйте! Не получается реализовать закрытие по клику открытого элемента в аккордеоне

https://codepen.io/suprascapularis/pen/MWVgbaj

Answer 1

[Квазиморд Сидорович]

Вот так работает

let listHeaders = document.querySelectorAll('.list-header');

listHeaders.forEach((elem) => {
  elem.addEventListener('click', function() {
    let parentElem = this.parentNode;
    let listContent = parentElem.querySelector('.list-content');
    let arrowDown = parentElem.querySelector('.arrow-down');
    let headerText = parentElem.querySelector('.header-text');
    if(listContent.classList.contains('.active') | arrowDown.classList.contains('active') | headerText.classList.contains('active')){
    listContent.classList.remove('active');
    arrowDown.classList.remove('active');
    headerText.classList.remove('active');
    } else {      
      if (document.querySelector('.active')) {
        for (let x of document.querySelectorAll('.active')) {
          x.classList.remove('active');
        }
      }
    listContent.classList.add('active');
    arrowDown.classList.add('active');
    headerText.classList.add('active');
    }
  })
})

но я вообще переписал бы этот код по другому.

Answer 2

[Beliyadm]

Убрать, у вас же и так ниже toggle есть

if (document.querySelector('.active')) {
      for (let x of document.querySelectorAll('.active')) {
        x.classList.remove('active');
      }
    }

Comments

[suprascapularis69]

Beliyadm необходимо, чтобы не было больше одного открытого элемента