Table of contents

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

  • Alberta Export Expansion Program

    The Canada-Alberta Job Grant is an employer-driven training program where employers and government share the cost of training new and existing employees to increase their knowledge and skills and meet the needs of Alberta’s changing economy.

  • Canada-Alberta Job Grant

    The Film and Television Tax Credit offers a refundable Alberta tax credit certificate on eligible Alberta production and labour costs to corporations that produce films, television series and other eligible screen-based productions in the province.

  • Expand all / Collapse all

    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.

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

  1. Use an H2 heading before the expandable list to introduce the accordions. Introductory text is optional after the H2.
  2. Use H3 headings for each expandable accordion.
  3. 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.