Expand/Collapse design pattern: Canada.ca design

When to use

The expand/collapse pattern can be used in 2 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).

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)

How to implement

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>
        

Research and blog posts

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

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

Latest changes

2019-11-28: guidance was changed to allow the use of expand/collapse for mutually exclusive answers.