Кнопка-аккордеон: как раскрывать и скрывать текст по очереди?

Задан 13 месяцев назад1.3к просмотров2 ответа

Хочу как в FAQ: список вопросов, нажал на вопрос — раскрылся ответ, нажал ещё — свернулся. Сделал для одного блока через if, но как сделать для нескольких вопросов сразу, не дублируя код?

Виктор Сорокин 🐣 Птенец

спросил 13 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

Навесь обработчик на все вопросы сразу через querySelectorAll и цикл. По клику переключай видимость соседнего блока-ответа.

<div class="item">
  <button class="q">Вопрос 1</button>
  <div class="a">Ответ 1</div>
</div>
<div class="item">
  <button class="q">Вопрос 2</button>
  <div class="a">Ответ 2</div>
</div>

.a { display: none; }
.a.open { display: block; }

document.querySelectorAll('.q').forEach(function(btn) {
  btn.addEventListener('click', function() {
    const answer = btn.nextElementSibling; // блок .a сразу после кнопки
    answer.classList.toggle('open');
  });
});

forEach вешает обработчик на каждый вопрос, nextElementSibling берёт ответ рядом, toggle('open') раскрывает/скрывает. Код один — а работает для всех вопросов.

Екатерина Соловьёва 🐣 Птенец

12 месяцев назад

Если querySelectorAll(...).forEach у тебя выдаёт ошибку — скорее всего, старый пример или опечатка. В современных браузерах forEach у результата querySelectorAll работает. Если же где-то нет — оберни в Array.from(...): Array.from(document.querySelectorAll('.q')).forEach(...).

Вера Романова 🐣 Птенец

13 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.