Expand/Collapse design pattern: Canada.ca design

When to use

The expand/collapse pattern can be used in two situations:

1. Presenting a choice between mutually exclusive answers

Use this pattern when people need to get different answers depending on their situation and when these answers are mutually exclusive.

This reduces the risk of having people wrongly think they got the answer that applies to their situation.

2. Presenting secondary information

Use this pattern to prevent secondary content from interfering with the main task.

This can be content that applies to most people, but that only a few people may need to use (for example, a privacy statement or additional details not needed to accomplish the main task).

It can also be content that applies only to a minority of people (such as when there is specific information for a specific audience).

Using expand all/collapse all buttons

Long description

Two grey buttons positioned side-by-side. Both have grey backgrounds. The button on the left has the text: Expand all. The button on the right has the text: Collapse all.

The expand all/collapse all option should only be used if it may benefit users to expose all information at once. This may include on a page containing many expand/collapse patterns with:

• secondary information, where exposing all information at once makes it easier to scan for something specific that may not be obvious based on the title of the expand/collapse
  • example: a latest updates page where the title of the expand/collapses are dates with the specific changes contained within the expand/collapse
• potential answers, where more than one might apply to the user. In this case, showing all answers expanded at once may help the user quickly scan and find what they need

What to avoid

Don't use this pattern if:

• the majority of people need the content to accomplish the main task (unless the answers are mutually exclusive)
• people need to answer several questions to get the answer that applies to them (use interactive questions instead)
• one of the mutually exclusive answers has multiple sub-tasks or more than one page of supporting content (use interactive questions instead)

Design specifications

Expand all/collapse all pattern

By default, all patterns should be closed.

Copy the code for the expand all/collapse all pattern.

Expand all/collapse all buttons

When clicked:

• expand all should open all the patterns, exposing the content within
• collapse all should close all the patterns

Copy the code for the expand all/collapse all buttons.

How to implement

Implementation notes

• The content of an expand/collapse is picked by web browsers for search purposes
• Modern web browsers support the find-in-page function, even if the expand/collapse is not open. It will auto-expand to show results.
• Clicking to open an expand/collapse is equally accessible as clicking a link for users

Implementations

Determine what best suits the type of page you're creating.

• Details closed - Plugins - Documentation - Web Experience Toolkit
• Details - GC Design System
• Button groups (horizontal) - GCWeb

Presenting a choice between mutually exclusive answers

<h3>Determine if you are in a shared custody situation</h3>
<p>Does the child spend their time:</p>
<ul class="list-unstyled">
 <li>
  <details>
   <summary>about equally between both parents</summary>
   <p>If the child shares their time about equally between the parents, then both parents are considered to have <strong>shared custody</strong> of that child...</p>
  </details>
 </li>
 <li>
  <details>
   <summary>mostly with you</summary>
   <p>If the child lives with you most of the time, you are considered to have <strong>primary custody</strong> for the purposes of the Canada child benefit...</p>
  </details>
 </li>
 <li>
  <details>
   <summary>mostly with the other parent</summary>
   <p>If the child lives with the other parent most of the time, the other parent is considered to have <strong>primary custody</strong> for the purposes of the Canada child benefit...</p>
  </details>
 </li>
</ul>

Presenting secondary information

<h3>Estimate your payments</h3>
<p>Use the estimator to help you plan your budget.</p>
<p>For example, you can estimate what amount you would get if:</p>
<ul>
 <li>you have a new child</li>
 <li>your income changes</li>
 <li>if you start or end shared custody</li>
</ul>
<details>
 <summary>See the math behind Canada child benefit payments</summary>
 <h3>How are payments calculated</h3>
 <p>Every month, Canada child benefit payments are adjusted based on:</p>
 <ul>
  <li>the number of children in your care</li>
  <li>the age of your children</li>
  <li>your marital status</li>
  <li>your family net income from the previous year</li>
 </ul>
 <p>...</p>
</details>

With expand all / collapse all

<h4>[Information by category]</h4>
<div class="btn-group mrgn-bttm-sm mrgn-tp-md">
  <button type="button" class="btn btn-default wb-toggle" data-toggle="{&quot;selector&quot;: &quot;details&quot;, &quot;parent&quot;: &quot;#expand-collapse&quot;, &quot;type&quot;: &quot;on&quot;}">Expand all</button>

  <button type="button" class="btn btn-default wb-toggle" data-toggle="{&quot;selector&quot;: &quot;details&quot;, &quot;parent&quot;: &quot;#expand-collapse&quot;, &quot;type&quot;: &quot;off&quot;}">Collapse all</button>
</div>
<div id="expand-collapse">
  <details>
    <summary>Topic 1 that is applicable to many</summary>
    <ul>
      <li>[Task link 1]</li>
      <li>[Task link 2]</li>
      <li>[Task link 3]</li>
      <li>...</li>
    </ul>
  </details>
  <details>
    <summary>Topic 2 that is applicable to many</summary>
    <ul>
      <li>[Task link 1]</li>
      <li>[Task link 2]</li>
      <li>[Task link 3]</li>
      <li>...</li>
    </ul>
  </details>
  <details>
    <summary>Topic 3 that is applicable to many</summary>
    <ul>
      <li>[Task link 1]</li>
      <li>[Task link 2]</li>
      <li>[Task link 3]</li>
      <li>...</li>
    </ul>
  </details>
  <details>
    <summary>...</summary>
  </details>
</div>

Research and rationale

We successfully tested the use of the expand/collapse pattern to encourage people to choose between mutually exclusive options during two optimization projects with the Canada Revenue Agency.

• Using expand/collapse for making choices (blog post)
• Research summary: Contact the CRA

Latest changes

2025-11-25

Added information about when to include expand all/collapse all buttons. Also added implementation notes.

2019-11-28

Guidance was changed to allow the use of expand/collapse for mutually exclusive answers.