Content expander
The Content expander is designed to save space by hiding content and takes up less visual prominence than an accordion.
When to use the Content 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 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 Content Expander
- From drop down Add 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.
Example Content Expander
Live examples
You can see live examples of how agencies have applied the component to their content.
- Careers NSW – First-time job seeker resumes and cover letters
- Southern NSW Local Health District – Volunteering with Southern NSW LHD
- Careers NSW – Discover industries
- Investment NSW – Skilled Work Regional visa (subclass 491)
- NSW Health – Influenza (flu)
- Transport for NSW – Places to visit in and around Armidale NSW