Overview
Accordions are a feature that allows you to present a page with areas that are only visible once clicked.
This is very useful for things like step by step guides, reference material or to help categorise content etc.
This feature allows the editor to add any type of content to an accordion.
They are grouped into groups of five but you are limited to how many you can place on a page.
A group of 2 x 5's will look seamlessly like one group of ten. If you have less than five in a group the unused ones will not force white space on to the page. They will just not show at all.
Feature showcase
The Accordion is a container-based control with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space.
Yes.
You can have formatted text using a full WYSIWYG capability for the editors. There can be text formatting like your standard bold etc. You can even have images.
Tables too
| Table | X1 | X2 |
|---|---|---|
| Y1 | Test | Test2 |
You can have multiple accordions on a page, or just a single accordion
Single accordion
Just some standard text, and some bullet points:
- one bullet point
- two bullet points
- three bullet points
Using background images
There is an option to replace the default background with an image, this can offer the opportunity to incorporate a light watermark or carefully incorporate your branding.
If using background images, make sure there's enough contrast between your text and your new background: accessibility.sa.gov.au/your-role/visual-design/colour-and-contrast
Given the limited space it's best to test what works and what doesn't.
Single accordion
Just some standard text, and some bullet points:
- one bullet point
- two bullet points
- three bullet points
Accordion group
Just some standard text, and some bullet points:
- one bullet point
- two bullet points
- three bullet points
Just some standard text, and some bullet points:
- one bullet point
- two bullet points
- three bullet points
Just some standard text, and some bullet points:
- one bullet point
- two bullet points
- three bullet points
Just some standard text, and some bullet points:
- one bullet point
- two bullet points
- three bullet points
Add this feature to your site
Guide to adding accordions (requires log-in)
Top accessibility tip
Accordions can be a great way to help break up long passages of content: accessibility.sa.gov.au/your-role/content/scannable-content
