Accordions
Accordions are a list of vertical headers that expand or collapse to show more content when selected.
They are used to increase the efficiency of information processing and discovery. One disadvantage of accordions is users do not see all the content included, so it's important to account for those who may not notice or click on the headers. For users who intend to read all the content available avoid using accordions, as they require additional clicks. Consider a full scrolling page with normal headers instead.
Accordions may seem to be a good solution for shortening long content pages. However, in many situations when all the page content is relevant to users, it is more advantageous to show all the content at once, even if doing so results in longer pages.
Types
Default
This is the accordion's default style and should be used in all circumstances, unless otherwise specified.
Primary style
This accordion type is based on the Primary button design. This style should be used sparingly and within the boundaries and constraints of the Design System.
Secondary style
This accordion type is based on the Secondary button design. This style should be used sparingly and within the boundaries and constraints of the Design System.
Tertiary style
This accordion type is based on the Tertiary button design. This style should be used sparingly and within the boundaries and constraints of the Design System.
Guidelines
While accordions are beneficial for collecting and organizing supplemental material, they should only be used on rare occasions. Avoid them when displaying critical system data or when users need to take immediate action.
Anatomy
- Header: Label (text) or thumbnail that controls showing or hiding a section of content.
- Panel: Content tied to the accordion header.
- Action: Icon/image that indicates whether a panel is collapsed or expanded.
Interaction
Specifications
According to these specifications, designers and developers can create better, pixel-perfect accordions.
- Write in a short, descriptive manner
- Be sure the user understands what they're going to see before they click.
- Ensure that each section is clearly distinguishable from the others.
- Make sure the labels aren't vague or generic.
- Hide crucial information merely to clean up the interface.
- Hide an activity if the client can undoubtedly do it without extra information.
- Hide essential activities on the page.
- Hide content that isn't logically relevant to the users input.
- Place accordions within accordions