Expand/Collapse design pattern: Canada.ca design system
The expand/collapse pattern (also known as accordion) allows content to be hidden until requested. The pattern consists of a trigger link that shows or hides the content.
Example:
You must click on this area to expand and collapse the content
This text is hidden until it is revealed.
On this page
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
Determine if you are in a shared custody situation
Does the child spend their time:
-
about equally between both parents
If the child shares their time about equally between the parents, then both parents are considered to have shared custody of that child...
-
mostly with you
If the child lives with you most of the time, you are considered to have primary custody for the purposes of the Canada child benefit...
-
mostly with the other parent
If the child lives with the other parent most of the time, the other parent is considered to have primary custody for the purposes of the Canada child benefit...
Code
<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
Estimate your payments
Use the estimator to help you plan your budget.
For example, you can estimate what amount you would get if:
- you have a new child
- your income changes
- you start or end shared custody
See the math behind Canada child benefit payments
How are payments calculated
Every month, Canada child benefit payments are adjusted based on:
- the number of children in your care
- the age of your children
- your marital status
- your family net income from the previous year
...
Code
<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.
Latest changes
2019-11-28: guidance was changed to allow the use of expand/collapse for mutually exclusive answers.
Page details
- Date modified: