An Accordion is a simple way of showing, hiding and breaking down content. It can be expanded or collapsed, which helps you read or find information, as well as reduce page length.
Anatomy of an Accordion
-
Header Area
This is the top area of the accordion, this is where the title and Panel Toggle sit. This area is always visible. This area complete can be clickable to expand and collapse the Panel. -
Panel Title
A Heading that tells the user what the content in the panel is about. It can contain any type of text and icons. -
Accordion Panel Toggle (optional)
An icon or button can be used to provide a specific point in the screen for the user to collapse or expand the panel. -
Panel Area
The collapsable container where other components are placed and information is displayed.
General Guidelines
Follow these guidelines for the most suitable and consistent experience:
-
An Accordion must always expand information below the title.
-
The title or toggle must clearly show there’s an interaction available to the user to expand or collapse.
-
If you are using arrows for toggle, they must face the way the content will expand (when in the default state) or collapse (when in it’s expanded).
-
An Accordion must always have the same width.
-
The title and content needs to feel part of the same thing. Use of subtle colour, shadows or lines can help distinguish between them if needed.
Modifiers
Panels within an Accordion have three different states; collapsed, hover and expanded.
Collapsed state
When the Accordion is collapsed, the Title, Header or Toggle should clearly show that the panel can be expanded. When using an arrow, this should be pointing down, showing the direction where content will expand.
Hover state
On web, when a user hovers over an Accordion panel, the element used to show the possibility to expand, are displayed in their native hover state.
Expanded state
When the Panel has been expanded, the content is displayed.
Dos & Don’ts
When working with Accordion, follow these recommendations to keep a consistent experience.