singledigitalpresence.vic.gov.au

Accordion

A list of expandable topics - a feature in the Ripple design system.

Usage

Use the accordion component to create a scannable, expandable checklist or step-by-step list for users.

It can also be used to conceal content where a page has a lot of information and the user is only looking for part of the information (eg an Annual reports page)

When a user clicks on an item, it expands to reveal text or media contents.

The accordion component fills the full width of the available content area on the live page.

Examples

Basic accordion

A visual example of an accordion.

List accordion working example: First home buyers checklist.

Numbered accordion

The numbered style of accordion displays a sequential number on each accordion segment title. Numbered accordions should only be used for procedural-type instructions where the order of doing things is important.

A visual example of a numbered accordion.

How to build accordions

Accordions can be embedded into the body content area of any landing page.

To build an accordion: 

  1. Click the Component type dropdown and select Accordion. Click you the Add another component button.
  2. What you put in the Accordion title will display on the page as an H2. Enter a descriptive heading. If you don't want a heading to display on the page above the accordion, leave this field blank.
  3. On the Accordion style dropdown, choose Basic or Numbered. Only use numbered accordions for procedural-type instructions where the order of doing things is important.
  4. Enter your first accordion subheading in the Item name field. This is what the user will see before they click, so make sure it's a clear description of the information that will be hidden. If you're using numbered accordions, use a verb and write it as an instruction,
  5. Enter the content that will be hidden in the Accordion content section:
  6. Click the Add another component button to add another section in the accordion. Fill in the Item name and Item content sections. (Accordions should have at least 2 pieces of accordion content.)

Accordion image dimensions

If you are going to embed images in accordion content, use these image dimensions:

  • Landscape image: maximum 818 wide
  • Portrait image: maximum 400 high

Find out how to upload and embed images

Screenshot of the Add an accordion section

Reviewed 30 March 2021

Get support using SDP

Our community of practice for anyone with content on SDP meets once every 2 months. We cover research, analytics, new features and more. You can also learn from how others are using the platform and get support to build new pages. To join or find out more contact nicole.shilo@dpc.vic.gov.au

Was this page helpful?