Accordions
An accordion is a menu that displays a list of headers that can be clicked to show or hide associated content. The accordions component is useful for sections such as Frequently Asked Questions (FAQs), in that it allows information to be displayed in a compact way, enabling your website users to select the information they want to show or hide.
Below is an example of an Accordion component.
Simplify content - accordions can help users focus on the information they need by hiding irrelevant information and displaying it one section at a time. Links can also be included in accordions.
Categorize content - accordions can be used to compartmentalize content into categories
As many as you like!
Accordions, like all components can be configured and styled to suit the look and feel of your site. Let's make some changes to the accordion. Within the accordion component, there is a "Styles" tab. In the below example, we have:
- Added a heading
- Changed the heading text colour to green
- Changed the background colour to white (both the "Accordion background colour" on the styles tab and the "Background Colour" under the page styles
- Set the "Body text colour" to black
- Set the "Body background colour" to a light grey
- Set the "Link colour" to green
- Set the "Border colour" to green
This accordion has a heading
Simplify content - accordions can help users focus on the information they need by hiding irrelevant information and displaying it one section at a time. Links can also be included in accordions.
Categorize content - accordions can be used to compartmentalize content into categories
As many as you like!
As you can see, the variations of accordion components are numerous, experiment and try some different styles out for yourself!
Accordions should be used sparingly on a web application and although they are accessible, (they can be expanded and collapsed with a keyboard as well as a mouse for example) they do have an interaction cost - users must click on each heading individually to access content. They are also not printer friendly (although we hope not many people are printing web pages these days!)