Accordions
Accordions turn sections of content into a scannable list, allowing the audience to view only the content they need and ignore what they don’t.
When to use accordions
Do
- Use accordions on standard content pages or landing pages. On landing pages use the Two thirds / Third - Large gutter section layout only, as using an accordion on a Full-width section creates readability issues.
- Limit of 10 tab items per accordion. Break large accordions up into smaller ones with headings between each accordion.
- Use descriptive headings to assist the audience in deciding what content to expand. Suggested limit of 50 characters for headings.
- Use accordions where it's likely the audience will only want to click one or two of the accordion headings.
- Consider whether it is better to:
- display all information at once on another page, rather than require the user to click on accordion headings
- reduce the page content
- use the Tabs component if the audience needs to switch between 2 tab items
- split the content across multiple pages.
- Do consider using the sequence component if the content flows in a sequential or linear order.
Don't
- Don't use accordions if the audience needs to click on most or all of the accordion headings to get their answer.
- Don't use accordions for important content.
- Don't use for very short content, use lists or paragraphs instead.
How to add an accordion
- From drop down Add Accordion/Tabs
- Type = Accordion
- Give your accordion a descriptive Heading. Recommended limit of 50 characters.
- Select the heading Type:
- H2
- The option – Excluded from in-page navigation – displays when you select the H2
- H3
- H4
- H5
- H2
- Overview (optional) - include a brief overview of the accordion and its content.
- Expanded by default (checkbox optional). If checked, the first accordion item will be expanded /open on the page by default.
- Add tab item
- Give your tab item a descriptive Heading
- Add the tab item content in the Body / WYSIWYG editor, as you would for general content.
- Add another Tab item.
- Continue adding tab items until you have created your accordion.
- Save your page to display the accordion.
How accordions display
Heading H3
Overview (optional) is created in a WYSIWYG editor as for general content.
This is the tab item’s body copy. You can include:
- sentences
- lists
- links.
Each of the accordion items should have a relationship to one another or form part of a sequence.
This is the tab item’s body copy. You can include:
- sentences
- lists
- links.
Each of the accordion items should have a relationship to one another or form part of a sequence.
This is the tab item’s body copy. You can include:
- sentences
- lists
- links.
Each of the accordion items should have a relationship to one another or form part of a sequence.
This is the tab item’s body copy. You can include:
- sentences
- lists
- links.
Each of the accordion items should have a relationship to one another or form part of a sequence.
Live examples
You can see live examples of how agencies have applied the accordion component to their content:
- Customer Service – OneCX Program service catalogue
- Health – Mental health support, services and programs
- Legal and Justice – Safeguard your identity
- Revenue NSW – Apply to go to court for a fine
- Youth Justice – Make a complaint to Youth Justice NSW
- Youth Justice – What could happen if a young person breaks the law?
- Youth Justice – What support does Youth Justice provide to young people in custody?
Switch between accordions and tabs
Once you have created your accordion, you can easily check to see how your content displays in the tabs layout.
- Open your accordion change the Type = Accordion to Type = Tabs.
- Save your page to check how your Accordion content now looks in Tabs.
- Reverse this process if you wish to keep your content in an accordion.