Skip to content

Popular topics:

Part of Components

Accordions

Expandable and collapsible, stacked headings that when clicked reveal content related to the heading.

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.

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

Accessibility

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.

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 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.

Content guidelines

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

Headings

  • 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.

Do not:

  • insert web components such as images, callouts and tables
  • use H3s and bolded text as heading options
  • use sub-bullets 
     
Previous Colour palette
Next Buttons