How to toggle child div accordion class when you click outside a nested div?

Question

Hopefully, I can explain what I am trying to accomplish. I am working on multiple Accordions. I have created a toggle for each Accordion box.

When I click on the parent div "accordion" it should add the active class to the accordion-content div

However, I don't want that I don't know what I am doing wrong here. I want to click on the "accordion__top" bar and toggle the content class only.

But I have some nesting issues.

Also, how to remove the previous active class if I toggle the next Accordion?

My code:

(() => {
    const Accordions = document.querySelectorAll('.accordion');

    if (!Accordions.length) {
        return;
    }

    const handleAccordion = accordion => {
        const AccordionContent = accordion.querySelector('.accordion__content');
        AccordionContent.classList.toggle('accordion__content--active');
        console.log(accordion);
    };

    Accordions.forEach((accordion, index) => {
        const bindAccordion = handleAccordion.bind(null, accordion, index);
        accordion.addEventListener('click', bindAccordion);
    });
})();

HTML:

<div class="accordion">
    <div class="accordion__box accordion__box--tertiary">
        <div class="accordion__top">
            <h2 class="accordion__title">Join the collab</h2>
            <span class="accordion__toggle accordion__toggle--primary"></span>
        </div>
        <div class="accordion__content">
            <p>Coolhaven Collab heeft wil zoveel mogelijk partners in de performance arts aanhaken. Hoe meer hoe beter. <br />
            Ben je coach, heb je een culturele locatie in Coolhaven of geef je bijvoorbeeld dans, zangof theater lessen? Laat je gegevens achter, dan nemen wij contact met je op.</p>
        </div>
    </div>
</div>

Answer 1

I have some difficulty understanding what you are trying to achieve.

You mention that you want to click on the "accordion" class to toggle the content and the you mention bellow that that you want to click on the "accordion__top" to toggle the content.

You don't mention what is not working?

edit, updated snippet

 (() => { const Accordions = document.querySelectorAll('.accordion__box'); if (!Accordions.length) { return; } const handleAccordion = accordion => { const OtherAccordions = document.querySelectorAll('.accordion__content--active'); OtherAccordions.forEach((a, index) => { a.classList.remove("accordion__content--active"); }); const AccordionContent = accordion.querySelector('.accordion__content'); AccordionContent.classList.toggle('accordion__content--active'); }; Accordions.forEach((accordion, index) => { const bindAccordion = handleAccordion.bind(null, accordion, index); accordion.addEventListener('click', bindAccordion); }); })(); 

 .accordion__content{ height:0; overflow:hidden; } .accordion__content--active{ height:auto; } 

 <div class="accordion"> <div class="accordion__box accordion__box--tertiary"> <div class="accordion__top"> <h2 class="accordion__title">Join the collab</h2> <span class="accordion__toggle accordion__toggle--primary"></span> </div> <div class="accordion__content"> <p>Coolhaven Collab heeft wil zoveel mogelijk partners in de performance arts aanhaken. Hoe meer hoe beter. <br /> Ben je coach, heb je een culturele locatie in Coolhaven of geef je bijvoorbeeld dans, zangof theater lessen? Laat je gegevens achter, dan nemen wij contact met je op.</p> </div> </div> <div class="accordion__box accordion__box--tertiary"> <div class="accordion__top"> <h2 class="accordion__title">Join the collab</h2> <span class="accordion__toggle accordion__toggle--primary"></span> </div> <div class="accordion__content"> <p>Coolhaven Collab heeft wil zoveel mogelijk partners in de performance arts aanhaken. Hoe meer hoe beter. <br /> Ben je coach, heb je een culturele locatie in Coolhaven of geef je bijvoorbeeld dans, zangof theater lessen? Laat je gegevens achter, dan nemen wij contact met je op.</p> </div> </div> </div> 

ps sorry about fiddle, had a brainfart