Accordion Documentation

Report an Issue Join the Slack Discussion

Display content in a compact manner. Accordions provide a space-saving technique for displaying content on your viewport. Users can explore an overview of topics and then expand accordions as needed to see more information.

Usage

Usability Guidance

• Use accordions only when information doesn’t need to be immediately visible, and you believe additional information will overwhelm users.
• Use accordions to a greater extent on mobile devices to help reduce scrolling.
• Use an icon or label on an accordion to visually indicate more information is available.
• Use an alternate icon or label on accordion to indicate an expanded state.

Further Reading

• Progressive Disclosure (Nielsen Norman Group)
• Accessible accordions & disclosure widgets (The A11Y Project)

Code Guidance

• Be sure include a class of accordion-last on the last element of your accordion.

Accessibility Requirements

• Use <dl> with a nested <button> element.
• Only display one load more button per page or differentiate load more button text so screen readers can differentiate for non-sighted users.
• Apply ARIA roles so accordions are tab-able.
• Apply ARIA states to denote open headings and panels.

Do’s and Don’ts

Do’s

• Customize the heading to describe the content nested within each panel.
• Use an icon or text label to visually indicate more information is contained within.

Don’ts

• Don’t nest the primary sections of a page in accordions, nest only the secondary topics.
• Don’t use accordions when additional or related content should have a separate page, due to the length of content or when visibility is needed in navigation and search engines.

Code

<section class="accordion">
    <dl>
        <button class="accordion__title" aria-expanded="false">
            <dt>Title</dt>
        </button>

        <dd class="accordion__content"> 
            <p>         
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus sed tellus id ullamcorper. In iaculis dolor vitae urna mattis, vel pellentesque dui semper. Sed dignissim, lorem eget tincidunt sollicitudin, nulla nibh gravida arcu, a fringilla turpis risus id eros. Aliquam lobortis iaculis nunc. Integer imperdiet lacus eget arcu aliquam volutpat. Integer molestie consequat facilisis. Nam dui odio, hendrerit porttitor elit ac, auctor tristique dui. Proin a bibendum sem, ac laoreet neque. Vestibulum elit sem, tincidunt eu lorem at, ullamcorper gravida nulla. Phasellus nec ex eros. Donec at odio eget turpis luctus euismod. Fusce mi ex, tincidunt nec accumsan fringilla, tincidunt venenatis ex. Praesent hendrerit quis dolor hendrerit tristique. Quisque ut metus turpis.
            </p>
        </dd>         

    </dl>    
</section>

<section class="accordion">
    <dl>
        <button class="accordion__title" aria-expanded="false">
            <dt>Title</dt>
        </button>

        <dd class="accordion__content"> 
            <p>         
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus sed tellus id ullamcorper. In iaculis dolor vitae urna mattis, vel pellentesque dui semper. Sed dignissim, lorem eget tincidunt sollicitudin, nulla nibh gravida arcu, a fringilla turpis risus id eros. Aliquam lobortis iaculis nunc. Integer imperdiet lacus eget arcu aliquam volutpat. Integer molestie consequat facilisis. Nam dui odio, hendrerit porttitor elit ac, auctor tristique dui. Proin a bibendum sem, ac laoreet neque. Vestibulum elit sem, tincidunt eu lorem at, ullamcorper gravida nulla. Phasellus nec ex eros. Donec at odio eget turpis luctus euismod. Fusce mi ex, tincidunt nec accumsan fringilla, tincidunt venenatis ex. Praesent hendrerit quis dolor hendrerit tristique. Quisque ut metus turpis.
            </p>
        </dd>         

    </dl>    
</section>

<section class="accordion accordion-last">
    <dl>
        <button class="accordion__title" aria-expanded="false">
            <dt>Title</dt>
        </button>

        <dd class="accordion__content"> 
            <p>         
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus sed tellus id ullamcorper. In iaculis dolor vitae urna mattis, vel pellentesque dui semper. Sed dignissim, lorem eget tincidunt sollicitudin, nulla nibh gravida arcu, a fringilla turpis risus id eros. Aliquam lobortis iaculis nunc. Integer imperdiet lacus eget arcu aliquam volutpat. Integer molestie consequat facilisis. Nam dui odio, hendrerit porttitor elit ac, auctor tristique dui. Proin a bibendum sem, ac laoreet neque. Vestibulum elit sem, tincidunt eu lorem at, ullamcorper gravida nulla. Phasellus nec ex eros. Donec at odio eget turpis luctus euismod. Fusce mi ex, tincidunt nec accumsan fringilla, tincidunt venenatis ex. Praesent hendrerit quis dolor hendrerit tristique. Quisque ut metus turpis.
            </p>
        </dd>         

    </dl>    
</section>