Accordions

Open in Figma View all renders

Accordions link their header and panel child elements through the aria-controls and aria-labelledby attributes on the relevant child elements. The value of aria-expanded on the data-accordion-header is used to show or hide the data-accordion-panel. See example below. 

<div class="accordion" data-accordion>
    <h3>
        <button id="accordion-header" type="button" aria-expanded="false" aria-controls="accordion-panel" data-accordion-header>
            accordion
            <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
        </button>
    </h3>
    <div id="accordion-panel" role="region" aria-labelledby="accordion-header" data-accordion-panel>
        panel
    </div>
</div>

Expanded accordion

When the component is wired up changing the aria-expanded attribute value from false to true will display the associated content. 

<div class="accordion" data-accordion>
    <h3>
        <button id="accordion-header-expanded" type="button" aria-expanded="true" aria-controls="accordion-expanded-panel" data-accordion-header>
            accordion
            <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
        </button>
    </h3>
    <div id="accordion-expanded-panel" role="region" aria-labelledby="accordion-header-expanded" data-accordion-panel>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
        voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
        adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
        sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
        temporibus accusantium ducimus commodi totam dolore?
    </div>
</div>

Variations and modifiers

Small accordion

Accordions are medium by default, this is the small variation. 

<div class="accordion accordion--small" data-accordion>
    <h3>
        <button id="accordion-header-small" type="button" aria-expanded="false" aria-controls="accordion-panel-small" data-accordion-header>
            accordion
            <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
        </button>
    </h3>
    <div id="accordion-panel-small" role="region" aria-labelledby="accordion-header-small" data-accordion-panel>
        panel
    </div>
</div>

Multiple accordions

Multiple components must be inside an accordion-container. 

<div class="accordion-container">
    <div class="accordion" data-accordion>
        <h3>
            <button id="accordion-header-multiple-1" type="button" aria-expanded="false" aria-controls="accordion-panel-multiple-1" data-accordion-header>
                accordion
                <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
            </button>
        </h3>
        <div id="accordion-panel-multiple-1" role="region" aria-labelledby="accordion-header-multiple-1" data-accordion-panel>
            panel
        </div>
    </div>
    <div class="accordion" data-accordion>
        <h3>
            <button id="accordion-header-multiple-2" type="button" aria-expanded="false" aria-controls="accordion-panel-multiple-2" data-accordion-header>
                accordion
                <span class="material-symbols-rounded" aria-hidden="true">chevron_right</span>
            </button>
        </h3>
        <div id="accordion-panel-multiple-2" role="region" aria-labelledby="accordion-header-multiple-2" data-accordion-panel>
            panel
        </div>
    </div>
</div>