Before using this component, confirm that your engineer has scope to submit their code to Labs.
Accordion is a vertically stacked set of headings that expand to show content and collapse to hide it.
Overview
An accordion displays secondary content to users using progressive disclosure. The headers function as the navigation and let a user control what to pay attention to (by expanding) and what to ignore (by collapsing).
Anatomy
- Header: Includes the label and serves as the control for expanding and collapsing.
- Icon: Shows if the panel is expanded or collapsed.
- Panel: The surface that holds the content described by the label.
When to use
Use an accordion to display noncritical content in these scenarios:
- To organize related information into sections.
- To shorten a page to reduce scrolling.
When not to use
Use another component to display content in these scenarios:
- To provide critical information necessary to understand or complete the experience.
- To guide users through a process or steps.
Variants
Bordered
There are dividing borders between headers.
Borderless
There are no dividing borders between headers.
Behaviors
Interactions
All of the header area in an accordion is interactive to provide better affordance to expand or collapse a panel.
States
Collapsed
By default an accordion is collapsed so that users can review the information architecture provided by the accordion headers.
When an accordion is collapsed it uses the chevron pointing down icon
Expanded
When the user interacts with the header and its control, the accordion is expanded so that users can view the content within the accordion panel.
- Multiple panels can be expanded at a time so that different sections of content are easily accessible.
- Accordions remain expanded until the user collapses it.
When an accordion is expanded it uses the chevron pointing up.
Interactive states
Hover
The hover state is initiated when a user pauses over the header with their cursor.
Focus
The focus state is initiated when a user clicks the header, expanding the panel.
Disabled
The disabled state prevents the user from clicking the header to expand the panel.
Accessibility
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for accordion.
Content guidelines
Header
- Order the headers in a logical sequence.
Header label
- Set clear expectations about the accordion’s purpose.
- Be concise, clear, and descriptive.
- Make the labels as parallel as possible in structure and length. For example, all single word nouns or all short subheading-like phrases.
- Use sentence case.
Panel content
- While any type of content can be in an accordion, text is the most usual content type.
- Content should be focused on the topic indicated in the header. If there is content on another topic, it should have its own accordion.
- Create a logical hierarchy that prioritizes what users need to know.
- Make the content as scannable as possible by using subheadings, paragraphs, and unordered or ordered lists when appropriate.
- Don’t rely on content in another accordion panel for the current panel to make sense. It can be difficult for users to retain information and/or jump back and forth between accordions to make sense of the content.
Content accessibility
No additional content is needed for header label accessibility.
If any panel includes non-text content, such as a non-decorative image, consult our Accessibility guidelines.