Skip to main content Skip to navigation Skip to search

Accordion

This component or utility is offered as a preview. This means we are currently working on it and seeking feedback. Please be aware that this component or utility may have breaking changes before we finish working on it.

An accordion is a collection of vertically stacked sections with multiple content areas which may be expanded or minimized by the user to reveal their content.

Usage

An accordion delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read. This is useful when the set of information is large or you want to enable users to reveal more complex or less frequently used data as necessary.

Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.

Header for panel #1

This is the content for accordion panel #1

Header for panel #2

This is the content for accordion panel #2

Header for panel #3

This is the content for accordion panel #3

Content

Keep text as brief as possible especially in header sections which should convey the nature of the content without overflow

Behavior

Accordions expand and collapse showing / hiding the data in a section when the user clicks on the panel header. Accordions by default only allow one panel to be open at a time. Multiple open panels are an available implementation option.Accordions expand and collapse showing / hiding the data in a section when the user clicks on the panel header. Accordions by default only allow one panel to be open at a time. Multiple open panels are an available implementation option.

Accordion States

Accordion panels can be expanded, disabled, and collapsed.

Expanded panel header

This is the content for an expanded accordion panel

Disabled panel header

This is the content for a disabled accordion panel

Collapsed panel header

This is the content for a collapsed accordion panel