Guidelines
When to use
- Use the Expandable Content component to simplify scanning a page by hiding information that is only relevant to a subset of users.
When not to use
- Do not use if the content contains essential information that all users need to see.
- Avoid using it if multiple expandable sections are needed one after another.
- When content contains nested actionable elements, it’s advisable to avoid using Expandable Content due to accessibility concerns. Such elements can’t be announced to users via assistive technologies.
Expandable Content Vs. Tabs
Use Expandable Content instead of Tabs when there is only one section of content to display, as it has a lower visual impact and is better suited for less important information.
Behaviors
Mouse interactions
The only interactive element in the component is the "Read more" link.
When the trigger is clicked, the revealed content pushes the content below as needed.
Keyboard interactions
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the trigger |
|
Space or Enter |
Expands the nested content |
Content
The label for expandable content should simply state that there is more information available.
To ensure that it is accessible and inclusive, do not use verbs like "See more" or "Read more". Instead, use "More info" or, if more accurate, “Details”.
If there is a reason to be more specific in the label about what appears when expanded, keep it short, clear, and accessible.