Overview
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.
Design
Usage guidelines
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.
Panel design
- 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 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.
Content guidelines
Use accordions sparingly. Ensure at least 250 characters with spaces of content will fill each accordion before requesting accordions.
Accordions on long pages of content help:
- shorten pages
- organize and hide information
- make it easier to scan accordion headings
Headings
- Use an H2 heading before the expandable list to introduce the accordions. Introductory text is optional after the H2.
- Use H3 headings for each expandable accordion.
- Within the accordions, use H4 or bolded text for headings.
Components
Do not use other components within an accordion.
Was this page helpful?
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.