dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Accordion

v7.0.8

Accordions help users see only the content they need. Accordions expand and collapse sections of content.

Released

History
View changes
Install
npm i @gov.au/accordion
Tags
Requires
Contributors
  • Nathan Davison avatar picture
  • Simon Schwartz avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski avatar picture
  • Julian Fleetwood avatar picture
  • Gary Broadbent avatar picture
  • Alexander Sadleir avatar picture
  • Raj Ghuman avatar picture
  • Trevor Brennan avatar picture
  • Patrick De Young avatar picture

Single action accordions

Accordion elements on some websites collapse any open panels when another one is opened. This behaviour can seem unpredictable for some users, which is why our accordion component does not behave in that way.

The intent is to make sure that users have full control over what content remains visible to minimise possible confusion when content suddenly ‘disappears from view.

Iconography

We settled on an up and down chevron icon, to represent our collapsible element, as opposed to a plus or minus, or arrows alternative.

This decision was made because the plus and minus could possibly indicate, and better describe, different functionality; for example, adding a dependant child to a form. While the arrows seemed more closely related to navigation.

When to use accordions

We recommend that accordions be used sparingly for primary content on a page. While they can be appropriate for organising small, specific sections of content, accordions are not a suitable replacement for well formatted plain text. If a user requires all, or most of the information on the page it should be visible, not hidden inside an accordion.

Before using an accordion, consider whether the benefits outweigh the negative usability impacts:

Hiding content makes it harder for a user to scan a webpage. If content is hidden inside an accordion it can be difficult for a user to scan a whole web page for content relevant to them. Web browsers' 'Find on page' search functions do not detect content hidden by accordions, making it harder for users to use their existing tools and behaviours to locate text.

Accordions increase cognitive load. Forcing a user to click on each accordion to receive the full text fragments their user experience, causing them to switch focus between accordions in order to gather all the information. It is also possible that with hidden content, a user might ignore, or not see important information.