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 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

TableX1X2
Y1TestTest2

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