Accordion

The accordion uses [aria-expanded] internally to make it collapsible. To render an accordion that’s expanded, set [aria-expanded] true or false.

Item 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ipsa et ducimus exercitationem numquam fugit ex placeat hic praesentium laborum perspiciatis aperiam dolorem, sit labore architecto laudantium dignissimos nemo recusandae. Explicabo iusto autem facilis labore? Id sequi, quisquam hic amet nihil ex architecto dicta sunt nesciunt aut, labore deleniti temporibus! Laboriosam minima ratione ipsa delectus eos! Voluptatibus quod cumque reprehenderit? Perferendis aut ex odit qui unde esse minima temporibus illo inventore? Maiores, libero sequi? Pariatur, eaque vitae delectus corrupti accusamus esse, placeat reprehenderit aliquid similique reiciendis, deserunt nulla ea vel. Doloremque omnis assumenda minus voluptates, autem earum dicta rerum nulla a labore maxime, at odio repellat corporis inventore, maiores vero praesentium architecto atque eligendi fugit quam. Blanditiis exercitationem vitae at? Numquam incidunt dolor ea voluptatibus id voluptatum exercitationem! Molestiae facere similique eligendi! Tempora, qui ratione in eos cupiditate quidem recusandae est distinctio ex, ipsum neque? Iure cum eveniet laudantium minus.

Item 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, commodi. Odit perferendis nesciunt nostrum consequatur tenetur, vero aspernatur, in, dicta et voluptatem velit corrupti ipsam accusantium sit asperiores tempora. Sequi. Dolor dolorum natus qui quae libero inventore mollitia alias exercitationem amet cum ullam perspiciatis sed, voluptas magni aliquid nemo quos dolores beatae quidem numquam iste aliquam minus? Est, repellat itaque. Maxime, magnam. Doloremque, autem id. Quos ratione earum veritatis illo similique magni minus. Ratione officia eum autem fugit repellat ut hic itaque eius, velit necessitatibus, iure dolores a? Pariatur, assumenda! Reiciendis debitis doloribus eos maxime, consectetur voluptas voluptatibus. Aut culpa, obcaecati, illo expedita magni deleniti aliquid ratione, explicabo veritatis aliquam dicta quibusdam optio repellat rerum ex ipsa! Laborum, minus dolor. Ratione neque aut incidunt dolores! Dolore id similique officiis enim debitis velit quasi, explicabo incidunt accusantium dignissimos consequatur facere! Eos consequatur saepe exercitationem dicta quis facere dolorum! Dolores, adipisci ducimus?

HTML


        
            <div class="accordion-container">
                <div class="accordion">
                    <!-- Item 1 -->
                    <div class="accordion-item">
                        <button id="accordion-button-1" aria-expanded="true" class="accordion-button">
                            <span class="accordion-title">
                                <h2>Title</h2>    
                            </span>
                            <span class="icon" aria-hidden="true"></span>
                            <span class="separator-line"></span>
                        </button>
                        <div class="accordion-content">
                            <!-- Content -->
                        </div>
                    </div>

                    <!-- Item 2 -->
                    <div class="accordion-item">
                        <button id="accordion-button-7" aria-expanded="false" class="accordion-button">
                            <span class="accordion-title">
                                <h2>Title</h2>
                            </span>
                            <span class="icon" aria-hidden="true"></span>
                            <span class="separator-line"></span>
                        </button>
                        <div class="accordion-content">
                            <!-- Content -->
                        </div>
                    </div>
                </div>
            </div>

JS


        
            const items = document.querySelectorAll(".accordion-button");

            function toggleAccordion() {
            const itemToggle = this.getAttribute("aria-expanded");

            for (i = 0; i < items.length; i++) {
                items[i].setAttribute("aria-expanded", "false");
            }

            if (itemToggle == "false") {
                this.setAttribute("aria-expanded", "true");
            }
            }

            items.forEach(item => item.addEventListener("click", toggleAccordion));