JS срабатывает только на первом элементе — как сделать для всех элементов?

Question

[paleolog]

Если есть возможность, ответьте на нубский вопрос))

Есть несколько блоков, нажимая на которые открывается текст.

<div class="vak">
     <div class="spoiler"></div>
</div>
<div class="vak">
     <div class="spoiler"></div>
</div>
<div class="vak">
     <div class="spoiler"></div>
</div>

Нажимая на блок .vak мы присваиваем блоку .spoiler класс active, и через display меняем значение
Мой скрипт срабатывает только на первое значение, а на остальные такие же уже не срабатывает - что я могу сделать, чтобы скрипт работал со всеми элементами?

document.addEventListener("DOMContentLoaded", () => {
    const vak = document.querySelector(".vak");
    const spoiler = document.querySelector(".spoiler");
  
    if (vak) {

        vak.addEventListener("click", function() {
          if (spoiler.classList.contains("active")) {
            spoiler.classList.remove("active");
          } else {
            spoiler.classList.add("active");
          }
        });
    }
  
    if (close) {
        close.addEventListener("click", function (){
          spoiler.classList.remove("active");
        })
    }
});

Answer 1

[Александр]

не понял про close и зачем spoiler, но суть думаю должна быть понятна -> пример

можно еще короче, но тут будет менее понятно

function _boot() {
    let vaks = document.querySelectorAll('.vak');
    [...vaks].forEach(el => el.addEventListener('click', () => el.classList.toggle('active')));
}
_boot();

Comments

[paleolog]

спасибо, все сработало!

Answer 2

[Secret73]

Вместо
const vak = document.querySelector(".vak");

Нужно
const vak = document.querySelectorAll(".vak");

Вместо строчки
vak.addEventListener("click", function() {

Нужно
vak.forEach(function(item){
item.addEventListener("click", function() {
})

Comments

[paleolog]

Думаю в моем коде много путаницы было, поэтому этот вариант не совсем подошел (блоки открывались, но с одним и тем же спойлером). Ответ выше подошел. Спасибо!

[Secret73]

paleolog, Да, у вас там нужна переделка.