Show/Hide Content Expander
The Show/Hide Content Expander is designed to save space by hiding content and takes up less visual prominence than an accordion.
When to use the Show/Hide expander
Do
- Use the expander on standard content pages and landing pages.
- Use the expander when you need to add more information, that is not essential to the audience understanding of the overall page.
- Limit of 1 expander per section of content.
- Use a descriptive heading to assist the audience in deciding what content is available in the expander.
- When the expander is closed (chevron down), the heading text will be preceded with the word “Show”.
- When the expander is open (chevron up), the heading text will be preceded with the word “Hide”.
- "Show" and "Hide" are by design and cannot be amended.
- Adjust your heading case to accommodate the design.
Don't
- Don't use the Show/Hide Content Expander for important content.
- Don't use for very short content, use lists or paragraphs instead.
- Do not stack expanders on top of each other. Use an accordion instead.
How to add the Show/Hide Expander
- From drop down Add Show/Hide Content Expander
- Add a Heading
- When the expander is closed, the heading text will be preceded with the word “Show”.
- When the expander is open, the heading text will be preceded with the word “Hide”.
- "Show" and "Hide" are by design and cannot be amended.
- Add the Content in the WYSIWYG editor, as you would for general content.
- Save your page to display the expander.