Accordion, открывается только первый элемент, как фикс?

Ссылка скопирована
CSS HTML JavaScript
22 января 2026 1 ответ

в аккордионе виден вопрос и кнопка, при клике на кнопку показывается ответ. Схема работает только на первый блок, как сделать что бы применялось ко всем? js

html

<div class="accordion__inner">     <div class="accordion__item">         <div class="accordion__content">             <div class="accordion__text">Вопрос:</div>             <button class="accordion__btn"></button>         </div>     <div class="accordion__answer">Ответ:</div>     </div>     <div class="accordion__item">         <div class="accordion__content">             <div class="accordion__text">Вопрос:</div>             <button class="accordion__btn"></button>         </div>     <div class="accordion__answer">Ответ:</div>     </div>     <div class="accordion__item">         <div class="accordion__content">             <div class="accordion__text">Вопрос:</div>             <button class="accordion__btn"></button>         </div>     <div class="accordion__answer">Ответ:</div>     </div> </div>

<div class="accordion__inner"> <div class="accordion__item"> <div class="accordion__content"> <div class="accordion__text">Вопрос:</div> <button class="accordion__btn"></button> </div> <div class="accordion__answer">Ответ:</div> </div> <div class="accordion__item"> <div class="accordion__content"> <div class="accordion__text">Вопрос:</div> <button class="accordion__btn"></button> </div> <div class="accordion__answer">Ответ:</div> </div> <div class="accordion__item"> <div class="accordion__content"> <div class="accordion__text">Вопрос:</div> <button class="accordion__btn"></button> </div> <div class="accordion__answer">Ответ:</div> </div> </div>

css

.accordion__answer {display: none} .active {display: block}

.accordion__answer {display: none} .active {display: block}

js

var accordionAnswer = document.querySelector('.accordion__answer')  var accordionBtn = document.querySelector('.accordion__btn')  accordionBtn.addEventListener('click', function() {     accordionAnswer.classList.toggle('active')   })

var accordionAnswer = document.querySelector('.accordion__answer') var accordionBtn = document.querySelector('.accordion__btn') accordionBtn.addEventListener('click', function() { accordionAnswer.classList.toggle('active') })

Дополнительно:

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

https://learn.javascript.ru/searching-elements-dom...

Как решить - заменить поиск не одного элемента, а всех, удовлетворяющих селектору.

Ответы:

var accordionContainer = document.querySelector('.accordion__inner');  accordionContainer.addEventListener('click', function({target}) {   if (target.classList.contains('accordion__btn')) {     var answer = target.parentNode.nextElementSibling;     answer.classList.toggle('active');   } });

var accordionContainer = document.querySelector('.accordion__inner'); accordionContainer.addEventListener('click', function({target}) { if (target.classList.contains('accordion__btn')) { var answer = target.parentNode.nextElementSibling; answer.classList.toggle('active'); } });

  • Все круто, работает. но как сделать что бы '.active' добавлялся именно '.accordion__answer', а не ближайшему соседу?

Вот есть хороший пример с подробным описанием - Тыц..
Думаю по нему не сложно будет разобраться и подправить свой скрипт.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Елена Вебер Ответ

Для решения проблемы с аккордеоном, открывающим только первый элемент, вам нужно добавить некоторый JavaScript код, который будет управлять состоянием аккордеона.

Прежде всего, убедитесь, что у вас есть структура HTML, которая представляет собой аккордеон с заголовками элементов и содержимым каждого элемента. Например:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 1</div>
    <div class="accordion-content">Содержимое 1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Заголовок 2</div>
    <div class="accordion-content">Содержимое 2</div>
  </div>
</div>

<div class="accordion"> <div class="accordion-item"> <div class="accordion-header">Заголовок 1</div> <div class="accordion-content">Содержимое 1</div> </div> <div class="accordion-item"> <div class="accordion-header">Заголовок 2</div> <div class="accordion-content">Содержимое 2</div> </div> </div>

Затем вы можете использовать следующий JavaScript код, чтобы сделать аккордеон интерактивным и позволить открывать и закрывать элементы:

document.addEventListener("DOMContentLoaded", function() {
  const accordionItems = document.querySelectorAll(".accordion-item");
 
  accordionItems.forEach(item =&gt; {
    item.addEventListener("click", function() {
      if (item.classList.contains("active")) {
        item.classList.remove("active");
      } else {
        accordionItems.forEach(el =&gt; el.classList.remove("active"));
        item.classList.add("active");
      }
    });
  });
});

document.addEventListener("DOMContentLoaded", function() { const accordionItems = document.querySelectorAll(".accordion-item"); accordionItems.forEach(item =&gt; { item.addEventListener("click", function() { if (item.classList.contains("active")) { item.classList.remove("active"); } else { accordionItems.forEach(el =&gt; el.classList.remove("active")); item.classList.add("active"); } }); }); });

Этот код добавляет обработчик событий клика для каждого элемента аккордеона. При клике на элемент, он проверяет, есть ли у него класс "active". Если есть, то класс удаляется и содержимое элемента скрывается. Если класса нет, то все элементы аккордеона теряют класс "active", а текущему элементу добавляется этот класс, что приводит к открытию его содержимого.

После добавления этого кода на вашу страницу, аккордеон должен работать корректно и открывать и закрывать элементы по клику на них.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему не работает связка 3X-UI на своем VPS и Necobox на Windows 10 и где искать причину? 0 ответов