Accordion

An Accordion is a vertically stacked menu. In its default state, it is a single line that shows only the header. When opened, the list expands to reveal the associated content.

• Interactive Playground
• Anatomy
• States
• Behavior
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various accordion styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div class="neo-accordion">
  <div class="neo-accordion__item">
    <div
      class="neo-accordion__header"
      role="heading"
      aria-label="Accordion Heading"
      aria-level="2"
    >
      <button
        class="neo-accordion__header-text"
        aria-expanded="false"
        aria-controls="accordion-control-:R0:"
        id=":R0:"
        aria-disabled="false"
      >
        Accordion Example
      </button>
    </div>
  </div>
</div>

<Accordion
  header="Accordion Example"
  onClick={function noRefCheck() {}}
>
  Inner content of Accordion example
</Accordion>

Accordions include standard components as shown below, all of which are required. The number of items within the accordion list can vary.

• Collapsed Accordion: The default state of the accordion. It occupies one line on the page.
• Header: This text field explains the content within the accordion. It should be a single line of text that clearly explains what is inside.
• Chevron Icon: The icon toggles the state of the accordion between Expanded and Collapsed. The icon changes to reflect the current state.
• Expanded Accordion: When the chevron is activated, the accordion expands to reveal its content.
• Panel: This is the content within the accordion: instructions, links, descriptions, etc.

An accordion exists in one of 3 states. The state changes as the user moves around the screen.

Default

Hover

Disabled

• Default: When the accordion does not have focus, it is in the Default state.
• Hover: Once the accordion has focus, it changes to the Hover state.
• Disabled: If the accordion is not available, it is displayed in the Disabled state and is inactive.

Use an accordion when you need to provide additional information or action items, but space is limited. The default state of the accordion is a single line of text that easily fits into restricted areas. When selected, the accordion expands to reveal the full range of options available to the user until they move on.

DO: Use accordions to group content together in tight spaces.

DON'T: Do not use an accordion when the content should be presented most or all of the time.

The height of a collapsed accordion is 46 pixels. An expanded accordion is as tall as necessary based upon the content.

Interior padding for all accordions is 12 pixels above and below, and 16 pixels on either side.

The chevron points to the left when the accordion is collapsed, and downward when it is expanded.

Different accordions are separated by 8 pixels and are stacked vertically.

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.