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.
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).
- 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.
Use an accordion to display noncritical content in these scenarios:
- To organize related information into sections.
- To shorten a page to reduce scrolling.
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.
There are dividing borders between headers.
There are no dividing borders between headers.
All of the header area in an accordion is interactive to provide better affordance to expand or collapse a panel.
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
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.
The hover state is initiated when a user pauses over the header with their cursor.
The focus state is initiated when a user clicks the header, expanding the panel.
The disabled state prevents the user from clicking the header to expand the panel.
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.
- Order the headers in a logical sequence.
- 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.
- 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.
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.