Accordions help organize and shorten content on a page, while also reducing the number of pages in a section. Clicking on an expandable heading opens for further reading on a topic or subject.
Because accordions hide content, be cautious to only add supporting content instead of primary content within the expandable headings.
Before using accordions, first consider:
- using headers and sub-headers to organize content
- simplifying and reducing the amount of content
- splitting content between multiple pages
Accordions are difficult to use with screen readers because they hide content. Additionally, in-page search (Ctrl+F) will only work once accordions are expanded. Ensure all accordions include an ‘Expand all/Collapse all’ button.
Have at least 2 or more expandable headings for accordions to be added to a web page. Do not use a single accordion.
Expanding and collapsing
As part of the overall structure, an ‘Expand all/Collapse all’ button must be added to the top right of the accordions for someone to open or close all the accordions at once.
‘Expand all/Collapse all’ Button
Padding: use 12 pixels all around except for the right side, which is 52 pixels to allow space for the icons.
Expand button switches between ’Expand all’ and ’Collapse all’. Use a small button:
- Font-size: 14 pixels
- Padding: 4 pixels above, 8 pixels on either side and below
Hidden content panels
When stacked, the first panel has a top border radius while the last panel has a bottom border radius (both 4 pixels on left and right). The content within the panel has a padding of 24 pixels around it.
- Every accordion panel uses a grey background (#F1F1F1).
- Hyperlink text and icon is blue (#0070C4) with the hover state being black (#333333).
- Display a plus icon when a panel is closed, and a minus icon when a panel is open.
Size and positioning
Accordions can be placed anywhere throughout the page except as the first piece of content on a page. They take up 100% of the width of any grid it’s placed within.
Use accordions cautiously. Ensure at least 250 characters with spaces of content will fill each accordion before requesting accordions. Consider if using an accordion outweighs the problems that come with hiding content.
Use accordions on long pages of content to:
- shorten pages
- condense long sections of secondary information
- make it easier to scan accordion headings
- see an overview of related sections of content
- keep related content together that otherwise would be split across multiple pages
- help users choose which sections are relevant to them
- separate content into different audience streams
Do not use accordions to:
- hide vital information, like program application procedures, forms or content users need to see
- hide only single words, phrases or sentences
- Accordions use a descending heading structure to ensure search engines can crawl the page effectively.
- Use an H2 before the expandable list to introduce the accordions. Introductory text is optional after the H2.
- Use an H3 for each expandable accordion.
- Header text should be descriptive and contain keywords that users may look for when scanning or searching a page for information.
- Use H4s within accordions to organize the content.
Formatting content within an accordion
Use only text, bullets and H4s within an accordion.
- insert web components such as images, callouts and tables
- use H3s and bolded text as heading options
- use sub-bullets
Was this page helpful?
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.