Accordion • Natura11y
Jump to main contentJump to website footer
Close-up view of a vibrant Monarch caterpillar gracefully navigating a green leaf

Photo by Sara Codair

Accordion

Introduction

Accordions are useful when a page covers several different topics. A good example would be an FAQ page. It's best to avoid using accordions to make long pages appear shorter.

Default Accordion Behavior

The following is a basic accordion component. All accordion panels are closed by default.


        <div class="accordion">
        
            <button
                class="accordion__button h5"
                id="acc-button-example-01"
                data-accordion="button"
                aria-controls="acc-panel-example-01"
                aria-expanded="false">
                    Danaus Plexippus
            </button>
            
            <div
                class="accordion__panel"
                id="acc-panel-example-01"
                data-accordion="panel"
                aria-labelledby="acc-button-example-01"
                role="region">
                
                <div class="accordion__panel__content">
                    <p>
                        The monarch butterfly or simply monarch is a milkweed butterfly...
                    </p>
                </div>
                
            </div>
            
            <!-- Repeat pair above as needed -->
        </div>
Figure 1
Line #Details
1

The parent .accordion class is required.

This selector uses JavaScript to group a set of topics (accordion headers) with one another.

3-10

The child .accordion__button selector is required.

The id attribute equals the value of its associated panel's aria-labelledby attribute.

The data-accordion="button" attribute is present on the accordion button for JavaScript purposes.

The aria-controls attribute equals its associated panel's id attribute.

The aria-expanded="false" attribute is present on the button where its associated accordion panel should be closed when the page loads.

12-25

The child .accordion__panel selector is required.

The id attribute equals the value of its associated button's aria-controls attribute.

The data-accordion="panel" attribute is present on the accordion panel for JavaScript purposes.

The aria-labelledby attribute equals the value of its associated buttons's id attribute.

The role="region" attribute is present on the accordion panel for assistive technology.

The granchild .accordion__panel__content selector holds the panel's content. Padding applied to this selector allows a clean open and close transition, without using jQuery.

Semantic Headers

The the .accordion__button selector doesn't have to be a button tag. In fact, header tags in the accordion help describe the architecture of a page. For example, if an accordion group lives below a page's <h1>, the accordion headers could be <h2> tags.


        <h2
            class="accordion__button 👉 h5"
            id="..."
            data-accordion="button"
            aria-controls="..."
            aria-expanded="false">
                Danaus Plexippus
        </h2>
Figure 2

In Figure 2 (line 2) notice the .h5 class. Header utility classes are particularly useful in this example. When a semantic header (e.g. <h1>) should be smaller visually than its natural markup style. You can use header utilities on non-semantic tags (e.g., <button>), that need the appearance of a header.

Open by Default

You may want one of your accordion topics to be open by default (when the page loads), like the following example:

The monarch butterfly or simply monarch is a milkweed butterfly in the family Nymphalidae. Other common names, depending on region, include milkweed, common tiger, wanderer, and black veined brown. It may be the most familiar North American butterfly, and is considered an iconic pollinator species.


        <button
            class="accordion__button h5"
            id="acc-button-id"
            data-accordion="button"
            aria-controls="acc-panel-id"
         👉 aria-expanded="true">
                Danaus Plexippus
        </button>
        
        <div
            class="accordion__panel 👉 show"
            id="acc-panel-id"
            data-accordion="panel"
            aria-labelledby="acc-button-id"
            role="region">
            <div class="accordion__panel__content">
                ...
            </div>
        </div>
Figure 3
Line #Details
6

On the .accordion__button selector, set the aria-expanded attribute to "true"

11

On the related .accordion__panel selector, include the class .show.