Accordions act as a way of collapsing otherwise unwieldy content. This can be useful for contexts where its more useful to show an overview of options, such as when dividing by audience or action. They should not be used for aesthetic reasons alone.

Accordions should be thought of as simply pairs of headings and their corresponding content. If the accordion functionality is removed, the content should still make sense in the hierarchy of the page and remain accessible. For this reason, we want to conditionally apply accordion scripts if JavaScript is available.

Accordion 1 heading

Accordion 1 content

Accordion 2 heading

Accordion 2 content

There are several conditions that we need to keep in mind with this accordion:

<div class="accordion">
    <div class="accordion-heading">
        <h2>Accordion 1 heading</h2>
    <div class="accordion-content">
        <p>Accordion 1 content</p>

Learn more about implementing this component: