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.
  • Do consider using the sequence component if the content flows in a sequential or linear order.

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 on a page

Landing page

You can add an Accordion to a landing page by selecting Accordion under the list of content blocks.

Standard page

You can added an accordion to a standard page by selecting Add Accordion/Tabs from the drop-down list of Blocks. Choose Type as Accordion

Configurations for accordions

1. Give your accordion a descriptive Heading. Recommended limit of 50 characters.
2. Select the heading Type:
   • H2
   • The option – Excluded from in-page navigation – displays when you select the H2
   • H3
   • H4
   • H5
3. Expanded by default (checkbox optional): if checked, the first accordion item will be expanded /open on the page by default.
4. Disable Expand Toggle (optional): if checked, the expand/collapse all buttons will always be hidden.
5. Overview (optional): include a brief overview of the accordion and its content. Only on a standard page.
6. Add Accordion item/Add tab item (standard page)
   1. Give your item a descriptive Heading
   2. Add the item content in the Body / WYSIWYG editor, as you would for general content.
7. Add another accordion item.
8. Continue adding accordion items until you have created your accordion.
9. Save your page to display the accordion.

Switch between accordions and tabs on 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. Open your accordion.
2. Change the Type = Accordion to Type = Tabs.
3. Save your page to check how your accordion content now looks in tabs.
4. Reverse this process if you wish to keep your content in an accordion.

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 on this article, submit a request via the webform.