Accordion

Accordions are expandable sections of content. Each section contains a summary element and more body text when opened.

Accordions keep pages clean by hiding information that most people do not need to see.

Basic accordion

Example
Source code

Add a short, descriptive heading for your topic

Once open, the content within the accordion should describe the topic in more detail. It should not repeat the heading.

This part of the accordion is a great place to link to other resources. Remember, important information and calls to action should live outside of the accordion.

If your heading must be longer, the accordion will wrap to multiple lines within the container like this

Once open, the content within the accordion should describe the topic in more detail. It should not repeat the heading.

This part of the accordion is a great place to link to other resources. Remember, important information and calls to action should live outside of the accordion.

This heading tells users what's inside the accordion

Once open, the content within the accordion should describe the topic in more detail. It should not repeat the heading.

This part of the accordion is a great place to link to other resources. Remember, important information and calls to action should live outside of the accordion.

Source code

<cagov-accordion>
  <details>
    <summary>Add a short, descriptive heading for your topic</summary>
    <div class="accordion-body">
      <p>
        Once open, the content within the accordion should describe the topic in
        more detail. It should not repeat the heading.
      </p>
      <p>
        This part of the accordion is a great place to link to other resources.
        Remember, important information and calls to action should live outside
        of the accordion.
      </p>
    </div>
  </details>
</cagov-accordion>
<cagov-accordion>
  <details>
    <summary>
      If your heading must be longer, the accordion will wrap to multiple lines
      within the container like this
    </summary>
    <div class="accordion-body">
      <p>
        Once open, the content within the accordion should describe the topic in
        more detail. It should not repeat the heading.
      </p>
      <p>
        This part of the accordion is a great place to link to other resources.
        Remember, important information and calls to action should live outside
        of the accordion.
      </p>
    </div>
  </details>
</cagov-accordion>
<cagov-accordion>
  <details>
    <summary>This heading tells users what's inside the accordion</summary>
    <div class="accordion-body">
      <p>
        Once open, the content within the accordion should describe the topic in
        more detail. It should not repeat the heading.
      </p>
      <p>
        This part of the accordion is a great place to link to other resources.
        Remember, important information and calls to action should live outside
        of the accordion.
      </p>
    </div>
  </details>
</cagov-accordion>

Example

List heading number 1

Use this space to offer visitors more detail. You can also link to additional resources.
List heading number 2

Use this space to offer visitors more detail. You can also link to additional resources.
List heading number 3

Use this space to offer visitors more detail. You can also link to additional resources.

Source code

<ol data-aria-accordion data-multi data-transition data-default="none">
  <li>
    <h3 data-aria-accordion-heading>List heading number 1</h3>
    <div data-aria-accordion-panel>
      <p>
        Use this space to offer visitors more detail. You can also link to
        additional resources.
      </p>
    </div>
  </li>
  <li>
    <h3 data-aria-accordion-heading>List heading number 2</h3>
    <div data-aria-accordion-panel>
      <p>
        Use this space to offer visitors more detail. You can also link to
        additional resources.
      </p>
    </div>
  </li>
  <li>
    <h3 data-aria-accordion-heading>List heading number 3</h3>
    <div data-aria-accordion-panel>
      <p>
        Use this space to offer visitors more detail. You can also link to
        additional resources.
      </p>
    </div>
  </li>
</ol>

Usage

When and how to use it

Use accordions to hide content most people do not need.

Headings can be a:

Word or phrase
Sentence
Question

Write headings that are brief and descriptive.

Only use accordions when:

A small group of people needs the information.
People only need certain information (like selecting one of several license types).
Providing notes or disclaimers.

How not to use it

Do not use accordions:

If more than a third of your visitors need the information in the accordion.
To make a page look shorter.
Inside other accordions.

Accordions hide information until someone opens them. This added step means visitors have to do extra work to get the information.

Do not put content that everyone needs to see in an accordion. Keep it in the body content.

Accessibility

Standard accessibility review

Each time a new component version is published:

Test with the axe accessibility tool
Review with the VoiceOver or NVDA screen reader
Ensure all actionable elements are accessible by keyboard command and tab in a logical order
Check the component layout on a variety of screen sizes