Accordion

An accordion is a list of headers that allow users to expand and collapse content panels pertaining to each header.

Overview

Example of an accordion with a heading and expanded content section

Accordion heading
Expanded accordion panel
Expanding accordion icon - Used to expand an accordion panel
Closing accordion icon - Used to close an accordion panel

Variations

Choose from the following types of accordion components based on your page’s content design or organizational needs.

Variant
Default Accordion	Use the default accordion to add a variant of this component that does not include a border around the accordion panels and only allows for one panel to be open at a time.
Bordered Accordion	Use the bordered accordion to add a border to the panels of your accordion.

Usage

Use accordion to reduce scrolling time and to shorten the length of pages.
On default, the accordion will expand the first section. Ensure that the first step or most important information is located on the first panel of your accordion.
Only allowing one panel to be open at a time reduces the scrolling area. However, this behavior might appear to be unpredictable to a user who expects to collapse each panel themselves.

When to use

Use for long form content that increases the length of a page.
Use to group or sort content in a specific way.

Best Practices

Character Limits

Character limits are strongly recommended to ensure text is concise, scannable, and not visually distorted.

Character limits are based on best practices and when a line of text will be forced to wrap onto a second line of text on desktop.

Accordion heading: 50 characters

Accessibility

Ensure heading levels are logical. When using a screen reader and navigating through the accordion panel headings, the heading levels must be the correct level for the page outline.
Keep heading levels consistent. When using a screen reader and navigating through the accordion panel headings, each accordion panel’s heading level must be the same.

Code Snippets

USA Accordion

To enable the default JavaScript interactions you must add import '@nciocpl/ncids-js/usa-accordion/auto-init'; to the top of your JavaScript file.

See the Accordion for more information regarding the accordion's initialization.

Component Preview

First Amendment

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

Second Amendment

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

This is a list item
Another list item

Third Amendment

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

Fourth Amendment

The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

<div class="usa-accordion" data-open-sections="1">
  <!-- Use the accurate heading level to maintain the document outline -->
  <h2>First Amendment</h2>
  <p>
    Congress shall make no law respecting an establishment of religion, or
    prohibiting the free exercise thereof; or abridging the freedom of speech,
    or of the press; or the right of the people peaceably to assemble, and to
    petition the Government for a redress of grievances.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h2>Second Amendment</h2>
  <p>
    A well regulated Militia, being necessary to the security of a free State,
    the right of the people to keep and bear Arms, shall not be infringed.
  </p>
  <ul>
    <li>This is a list item</li>
    <li>Another list item</li>
  </ul>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h2>Third Amendment</h2>
  <p>
    No Soldier shall, in time of peace be quartered in any house, without the
    consent of the Owner, nor in time of war, but in a manner to be prescribed
    by law.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h2>Fourth Amendment</h2>
  <p>
    The right of the people to be secure in their persons, houses, papers, and
    effects, against unreasonable searches and seizures, shall not be violated,
    and no Warrants shall issue, but upon probable cause, supported by Oath or
    affirmation, and particularly describing the place to be searched, and the
    persons or things to be seized.
  </p>
</div>

Bordered USA Accordion

Component Preview

First Amendment

Second Amendment

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

This is a list item
Another list item

Third Amendment

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

Fourth Amendment

<div class="usa-accordion usa-accordion--bordered" data-open-sections="1">
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>First Amendment</h4>
  <p>
    Congress shall make no law respecting an establishment of religion, or
    prohibiting the free exercise thereof; or abridging the freedom of speech,
    or of the press; or the right of the people peaceably to assemble, and to
    petition the Government for a redress of grievances.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Second Amendment</h4>
  <p>
    A well regulated Militia, being necessary to the security of a free State,
    the right of the people to keep and bear Arms, shall not be infringed.
  </p>
  <ul>
    <li>This is a list item</li>
    <li>Another list item</li>
  </ul>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Third Amendment</h4>
  <p>
    No Soldier shall, in time of peace be quartered in any house, without the
    consent of the Owner, nor in time of war, but in a manner to be prescribed
    by law.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Fourth Amendment</h4>
  <p>
    The right of the people to be secure in their persons, houses, papers, and
    effects, against unreasonable searches and seizures, shall not be violated,
    and no Warrants shall issue, but upon probable cause, supported by Oath or
    affirmation, and particularly describing the place to be searched, and the
    persons or things to be seized.
  </p>
</div>

USA Accordion with Open Sections

On default, the accordion will expand the first section. To change the default expanded section, add the attribute data-open-sections to the accordion component.

On multiselect accordions, this attribute may take a list of sections to be expanded at once.

Component Preview

First Amendment

Second Amendment

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

This is a list item
Another list item

Third Amendment

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

Fourth Amendment

<div class="usa-accordion" data-open-sections="2">
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>First Amendment</h4>
  <p>
    Congress shall make no law respecting an establishment of religion, or
    prohibiting the free exercise thereof; or abridging the freedom of speech,
    or of the press; or the right of the people peaceably to assemble, and to
    petition the Government for a redress of grievances.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Second Amendment</h4>
  <p>
    A well regulated Militia, being necessary to the security of a free State,
    the right of the people to keep and bear Arms, shall not be infringed.
  </p>
  <ul>
    <li>This is a list item</li>
    <li>Another list item</li>
  </ul>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Third Amendment</h4>
  <p>
    No Soldier shall, in time of peace be quartered in any house, without the
    consent of the Owner, nor in time of war, but in a manner to be prescribed
    by law.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Fourth Amendment</h4>
  <p>
    The right of the people to be secure in their persons, houses, papers, and
    effects, against unreasonable searches and seizures, shall not be violated,
    and no Warrants shall issue, but upon probable cause, supported by Oath or
    affirmation, and particularly describing the place to be searched, and the
    persons or things to be seized.
  </p>
</div>

Default USA Accordion with Multiselect

To allow multiple accordion sections expanded at once, you must add attribute data-allow-multiple to the accordion HTML.

Component Preview

First Amendment

Second Amendment

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

This is a list item
Another list item

Third Amendment

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

Fourth Amendment

<div class="usa-accordion" data-allow-multiple data-open-sections="1">
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>First Amendment</h4>
  <p>
    Congress shall make no law respecting an establishment of religion, or
    prohibiting the free exercise thereof; or abridging the freedom of speech,
    or of the press; or the right of the people peaceably to assemble, and to
    petition the Government for a redress of grievances.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Second Amendment</h4>
  <p>
    A well regulated Militia, being necessary to the security of a free State,
    the right of the people to keep and bear Arms, shall not be infringed.
  </p>
  <ul>
    <li>This is a list item</li>
    <li>Another list item</li>
  </ul>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Third Amendment</h4>
  <p>
    No Soldier shall, in time of peace be quartered in any house, without the
    consent of the Owner, nor in time of war, but in a manner to be prescribed
    by law.
  </p>
  <!-- Use the accurate heading level to maintain the document outline -->
  <h4>Fourth Amendment</h4>
  <p>
    The right of the people to be secure in their persons, houses, papers, and
    effects, against unreasonable searches and seizures, shall not be violated,
    and no Warrants shall issue, but upon probable cause, supported by Oath or
    affirmation, and particularly describing the place to be searched, and the
    persons or things to be seized.
  </p>
</div>

Packages

Import this Sass partial into your stylesheet.

@forward "usa-accordion";