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

Question

[ffshow16]

в аккордионе виден вопрос и кнопка, при клике на кнопку показывается ответ. Схема работает только на первый блок, как сделать что бы применялось ко всем? 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>

css

.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')
  })

Comments

[Вадим]

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

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

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

Answer 1

[Andrey Vasilev]

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');
  }
});

Comments

[ffshow16]

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

Answer 2

[Константин]

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