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.
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 with background image
Just some standard text, and some bullet points:
- one bullet point
- two bullet points
- three bullet points
Grouping accordions
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.
A group of 2 accordions
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
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