Adding an Accordion block to a page

You can use accordions to save space on content pages that contain a lot of information. Accordions turn sections of content into a scannable list, allowing users to view only the content they need. They're also useful to help users compare content.

On this page

• When to use accordions
• Adding accordions on a page
• Configurations for accordions
• See accordions live on the CMS Components Guide

---

When to use accordions

Do

• Use accordions on standard content pages or landing pages. On landing pages use the Two thirds / Third - Large gutter section layout only, as using an accordion on a Full-width section creates readability issues.
• Limit of 10 tab items per accordion. Break large accordions up into smaller ones with headings between each accordion.
• Use descriptive headings to assist the audience in deciding what content to expand. Suggested limit of 50 characters for headings.
• Use accordions where it's likely the audience will only want to click one or two of the accordion headings.
• Consider whether it is better to:
  • display all information at once on another page, rather than require the user to click on accordion headings
  • reduce the page content
  • use the Tabs component if the audience needs to switch between 2 tab items
  • split the content across multiple pages.
  • If the content flows in a sequential or linear order consider using the sequence component.

Don't

• Don't use accordions if the audience needs to click on most or all of the accordion headings to get their answer.
• Don't use accordions for important content.
• Don't use for very short content, use lists or paragraphs instead.
   

---

Adding accordions to your page

It will depend on your page type how you can add an accordion to your page. 

Landing page

To add an Accordion block to your landing page, go to the Layout screen, click Add block, +Create content block, and select Accordion from the list of options.

Standard page

You can added an accordion to a standard page from the Edit screen, clicking the dropdown arrow in the Add block button and selecting Add Accordion/Tabs. In the Type drop down select Accordion.

Setting up your accordions

1. In the Heading field give your accordion a descriptive title. The heading should give an overview of what the accordions are about. Recommended limit of 50 characters.
2. In the Type dropdown, select the appropriate heading level. Consider whereabouts on your page the accordion will be positioned to decide which heading level to use. If you're unsure, find out more about headings levels. You can choose to exclude your H2 heading from the in-page navigation, which is the default for all H2 headings. The in-page navigation is visible by default on standard pages, or you can add it to a landing page.  
3. The Overview field is an optional field available on standard pages. You can include a brief overview of the accordions and its content. 
4. The Expanded by default checkbox is optional. If checked, the first accordion item will be expanded/open on the page by default.
5. The Disable Expand Toggle is optional. If checked, the expand/collapse all buttons will always be hidden.
6. You can add your accordions using the Add another item or Add accordion item button. For each accordion item add a descriptive Heading and add the accordion content in the Body or Text field.
7. Continue adding accordion items until you have created your accordion.
8. Save your page to see the accordion.

Switch between accordions and tabs on a standard page

Once you have created your accordion on a standard page, you can easily check to see how your content displays in the tabs layout.

1. In the Edit screen go to your accordion.
2. In the Type dropdown select Tabs.
3. Save your page to check how your accordion content now looks in tabs.

See accordions live on nsw.gov.au

Visit Accordions to see how this works on a live page.

You can also see live examples of how agencies have applied the accordion component to their content:

• Customer Service: OneCX Program service catalogue
• Health: Mental health support, services and programs
• Legal and Justice: Safeguard your identity
• Revenue NSW: Apply to go to court for a fine
• Youth Justice: Make a complaint to Youth Justice NSW
• Youth Justice: What could happen if a young person breaks the law?
• Youth Justice: What support does Youth Justice provide to young people in custody?

Need any more help?

If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.