აკარდიონის აწყობა ჯავასკრიპტით

მოცემულ გაკვეთილში ვაკეთებთ აკარდიონს ჯავასკრიპტის DOM-ით

HTML

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">Lorem ipsum dolor sit.</div>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae amet ut illo quos id ducimus at ea quas animi accusantium commodi, excepturi nobis veniam autem maiores harum sit doloribus dolore.
            Exercitationem esse culpa repudiandae asperiores aperiam quos pariatur impedit nulla nesciunt cumque doloremque doloribus dolorum temporibus fuga eligendi, debitis praesentium, at eos molestias consequatur dolore! Commodi nihil quidem delectus placeat?
            Magni quia reiciendis sunt reprehenderit consequatur saepe dolorem, ab veniam commodi ipsa sequi temporibus vel et quo modi provident! Sequi ea neque voluptatem quaerat optio laboriosam sapiente. Possimus, amet distinctio.
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Lorem ipsum dolor sit.</div>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae amet ut illo quos id ducimus at ea quas animi accusantium commodi, excepturi nobis veniam autem maiores harum sit doloribus dolore.
            Exercitationem esse culpa repudiandae asperiores aperiam quos pariatur impedit nulla nesciunt cumque doloremque doloribus dolorum temporibus fuga eligendi, debitis praesentium, at eos molestias consequatur dolore! Commodi nihil quidem delectus placeat?
            Magni quia reiciendis sunt reprehenderit consequatur saepe dolorem, ab veniam commodi ipsa sequi temporibus vel et quo modi provident! Sequi ea neque voluptatem quaerat optio laboriosam sapiente. Possimus, amet distinctio.
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Lorem ipsum dolor sit.</div>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae amet ut illo quos id ducimus at ea quas animi accusantium commodi, excepturi nobis veniam autem maiores harum sit doloribus dolore.
            Exercitationem esse culpa repudiandae asperiores aperiam quos pariatur impedit nulla nesciunt cumque doloremque doloribus dolorum temporibus fuga eligendi, debitis praesentium, at eos molestias consequatur dolore! Commodi nihil quidem delectus placeat?
            Magni quia reiciendis sunt reprehenderit consequatur saepe dolorem, ab veniam commodi ipsa sequi temporibus vel et quo modi provident! Sequi ea neque voluptatem quaerat optio laboriosam sapiente. Possimus, amet distinctio.
        </div>
    </div>
</div>

CSS

.accordion {
    border: 1px solid #ccc;
}
.accordion-header {
    padding: 15px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.accordion-body {
    display: none;
    padding: 15px;
    border-bottom: 1px solid #ccc;
}

.accordion-body.active {
    display: block;
}

JS

const items = document.querySelectorAll('.accordion .accordion-item');

items.forEach(item => {
    const trigger = item.querySelector('.accordion-header');

    trigger.addEventListener('click', () => {
        trigger.nextElementSibling.classList.toggle('active');
    });
});