Expand and collapse

The expand and collapse component allows content to be hidden until requested.

Overview

Usage

When to use

Check out the Canada.ca design system pattern for guidance on when to use the accordion.

When NOT to use

Do not use the expand and collapse component if:

• users need all the information on the page.
• users need to print the page.
• you want to call attention to the content.

Instead of using expand and collapse:

• reduce the content that needs to be displayed.
• use multiple pages to display the content.
• use headings to structure and separate the content.

Check out the Canada.ca design system pattern for more guidance on when not to use the expand and collapse component.

How to use

• Include only one topic per expand and collapse section.

Related components

Typography

Heading 1

Information accordion

How we created this component- 4A assessment

We imported and accepted this component from the GC Design Library.