The left hand navigation is removed for demonstrating this component as a home page.
Overview
Usually used within content pages to help break up content, accordions can be included on the homepage to achieve the same outcome.
Accordions are a feature that allows you to present areas that are only visible once clicked.
This feature is useful for things like step by step guides, reference material or to help categorise content.
The feature allows the editor to add any type of content to an accordion.
Accordions are arranged into groups of five, but you are limited to how many you can place on a page.
A group of 2 accordions 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 accordians (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
