Accordion - Design System

A list of expandable topics.


Use the Accordion component to create an expandable step-by-step list or checklist for users.

Each list item can expand to reveal text or media.

The component fills the full width of the available content area.


List 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 alongside 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 can be embedded into the body content area of any landing page.

For more detailed information view the Victorian Government digital guide.

Reviewed 13 May 2019

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

Was this page helpful?