Как правильно сделать аккордеон?

Question

[SergioMarquinha]

Здравствуйте! Пытаюсь реализовать аккордеон так, чтобы при клике на заголовок раскрывался список, все работает, но класс active применяется для всех, и получается при клике на первый заголовок раскрываются все списки. Как нужно правильно прописать?

let title = document.querySelectorAll('.documents__accordion-title');
let list = document.querySelectorAll('.documents__list');



for (i = 0; i < title.length; i++) {
    title[i].addEventListener("click", function () {
        list.forEach((l) => {
            if (l.classList.contains("active")) {
                l.classList.remove("active")
            } else {
                l.classList.add("active")
            }

        })
    })
}

Answer 1

[Сергей delphinpro]

<div class="documents">
    <div class="documents__accordion-title"> </div>
    <div class="documents__list"> </div>
</div>
<div class="documents">
    <div class="documents__accordion-title"> </div>
    <div class="documents__list"> </div>
</div>
<div class="documents">
    <div class="documents__accordion-title"> </div>
    <div class="documents__list"> </div>
</div>

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

accordions.forEach(accordion => {
    const title = accordion.querySelector('.documents__accordion-title');
    const list = accordion.querySelector('.documents__list');
    title.addEventListener('click', () => {
        if (list.classList.contains('active')) {
            // Закрыть кликнутый
            list.classList.remove('active');
        } else {
            // Закрыть все
            accordions.forEach(accordion => {
                accordion.querySelector('.documents__list').classList.remove('active');
            });
            // Открыть кликнутый
            list.classList.add('active');
        }
    });
})