Accordions can be used to divide and collapse information that is not necessary to see all at once, i.e FAQ, Terms and Conditions. It structures content and can make it easier for the user's eye to find content, since we are showing the headers (whilst hiding the detailed information). It works especially well when users know what they are looking for.
When and how to use it
This component is best suited for plain text, lists, tables and inline links. The header "cell" can contain a header only, or a header with a sub-line.
We would like to point out that scrolling is your friend. You can choose to present "longer" content on one page without hiding it in an collapsable component.
The accordion hides the majority of the content. Therefor it is not recommended for interactive components that requires the user to interact (inputfields, call-to-action buttons, etc) or entire user flows.
If there is more complex content, consider splitting up the information by using sub-pages or tabs which will not hide the content.
The default accordion is collapsed with the chevron pointing down. There is a grey hover on the header "cell". When the user clicks anywhere on the "cell", the expanded area is displayed and the chevron points up. The expanded content background is white or grey, depending on what suits the situation best.
Let's say the user is interested in opening an account. The information about the account can be divided into categories such as “About”, “How do I open an account” and “Terms and conditions”. With the accordion, the user gets a quick overview of the information and can decide what header "cell" to expand to read more.
Do's and don'ts
- Use the accordion for FAQ, Terms and Conditions, etc.
- It is allowed to place the chevron to the left or right of the header.
- Avoid placing heavy content, such as entire flows, videos or interactive components, in a collapsable component.
- Line: Grey 8
- Hover: Grey 9 #F6F6F6
- Expanded background: White or Grey #F5F5F5