При нажатии на аккордеон, открывается только первая строчка из трех, как сделать правильно?

Question

[Alan Solid]

Код который я использую

Проблема в том, что я понимаю что я не добавил такие строчки как: "addclass, removeclass"
Но я не уверен в этом, уже несколько дней пытаюсь понять как это всё правильно сделать, поэтому надеюсь что мне кто-то ответит и да, я только учусь js
Так же хотел спросить, как сделать открытие и закрытие только при нажатии на title, потому что аккордион закрывается так же и при нажатии на text
Спасибо!

Answer 1

[Александр]

const accordions = document.querySelectorAll('.accordion__card');

for (const accordion of accordions) {
  const title = accordion.querySelector('.accordion__card__title');
  const text = accordion.querySelector('.accordion__card__text');

  title.addEventListener('click', () => {
    if (text.classList.contains('accordion__card__text--active')) {
      text.classList.remove('accordion__card__text--active');
    } else {
      for (const accordion of accordions) {
        const text = accordion.querySelector('.accordion__card__text');

        text.classList.remove('accordion__card__text--active');
      }

      text.classList.add('accordion__card__text--active');
    }
  });
}

Ту часть, на которую пользователь нажимать должен лучше сделать кнопкой. А еще вот это можете почитать.

Comments

[Alan Solid]

Спасибо большое!
Только 3 вопроса, если вы не против:
1. Можете объяснить что написано после else? для того чтобы я понял что это означает и как это использовать после.
2. если у меня есть в виде fa arrow и мне надо чтобы при активном состоянии он был как при hover, что мне нужно написать?
3. Как добавить анимацию?

[Александр]

Alan Solid,
1. До else логика для кейса, если нажали на тот же элемент; после - если на другой.
2. CSS ваше всё.
3. С анимацией весь код будет намного сложнее. Вам необходимо добавлять некий класс, который будет начинать скрывать элемент, прослушивать событие transionend, в котором необходимо добавлять класс для тела аккордиона, который будет скрывать элемент из DOM-а. Также необходима логика, которая будет высчитывать высоту тела аккордиона, чтобы корректно анимировать высоту (либо использовать хак через max-height).