Accordion

An accordion is a series of expandable vertical panels, designed to save space on a page by hiding content and revealing it as required.

Figma

Guidance
Demo & Code

Usage

Accordions can work well for people who use a service regularly, or who need to perform familiar tasks quickly.

Only use an accordion if there’s evidence it’s helpful for users to:

see an overview of multiple, related sections of content
show and hide those sections as needed

When to avoid

Test your content without an accordion first. Consider if it’s better to:

simplify and reduce the amount of content
split the content across multiple pages
keep the content on a single page, separated by headings
use a list of links to let users navigate quickly to specific sections of content
use the Tab component for users who need to switch quickly between 2 sections. Accordions push other sections down the page when they open, but tabs do not move which makes it easier to switch.

Do not:

use the accordion if the amount of content it would need to contain will make the page slow to load
use accordions to split up a series of questions into sections. Use separate pages instead
use with very short content, use lists or paragraphs
use with very long content, use tabs or separate pages
add any other UI elements within the header
use where important information can be hidden and missed
use an accordion to shorten a page.

Collapse all/Expand all

The optional collapse all/expand all functionality allows users to perform the action to all accordions, reducing time and clicks to reach the required information. It can be removed or added as required.

This function should not be used to help users locate information within accordions. If a user is expanding multiple accordions because they are unsure of the content they contain, consider more descriptive titles or removing accordions all together and displaying the content separated by headings.

Open accordion pane on page load

By default, all panes in an accordion are closed. To render an accordion pane expanded on page load, add the .nsw-accordion__open class on the .nsw-accordion__title element.

Principles

Use clear labels

Accordions hide content, so the labels need to be clear. Ensure the headings used are brief and explicit about what is contained in the hidden panel. Intuitive headings help the user build a clear mental model of the content.

Do not disable sections

Accordions can be set open or closed. They can be configured to only allow 1 panel to be open at a time. Do not use with only 1 panel allowed to be open at once, if people need to compare items in different panels.

Disabling controls is normally confusing for users. If there is no content for a section, either remove the section or, if this would be confusing for your users, explain why there is no content when the section is opened.

Consider tabs if the user would likely need to flick between content sections.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

View in new window View theming example

Accordion with expand/collapse all

First Home Owner's Grant (New Homes) scheme (FHOG)

Buying or building your first home? You may be eligible for a $10,000 grant under the First Home Owner's Grant (FHOG) scheme.

This grant scheme only applies to buying or building a new home.

You can make a claim if:

your home is newly constructed and has a total value of less than $600,000
the land and the dwelling you intend to build has a combined value of less than $750,000.

HomeBuilder program

If you are building a new home, you could also be able to apply for the Australian Government grant of $25,000. To be eligible you must:

sign the contract between 4 June 2020 and 31 December 2020
commence within 3 months of the contract date.

HomeBuilder complements the NSW Government’s existing First Home Owner Grant and stamp duty concessions.

First Home Buyer Assistance scheme (FHBAS)

The NSW Government recently announced increased thresholds for purchases of new homes and vacant land to build a new home from 1 August 2020. The threshold for existing home purchases remains unchanged.

Simple accordion

Sprint cadence or workflow

In your team there may already be a sprint cadence that includes content design. Become familiar with agile practices such as the Kanban wall, daily stand ups and sprint planning. Understand the user journey and their needs. Get involved in usability testing sessions and iteration.

Otherwise, the content workflow may be separate from the product team. At the very least, make sure the team has real content to use, when they’re building a prototype. Also ensure your team uses real content when it does usability testing. Attend playbacks from this testing, to know how your content needs to change.

As well as designing the user experience with product team members, a content designer works to know the facts with subject matter experts.

Simplifying complexity

Your aim from the outset is to simplify everything for the user. Your main task will be to set up a clear path for them to achieve their goal.

Start with a user story. You should create one for each piece of content, from user research. If you’re part of a multidisciplinary product team, everyone is likely to be using them as you design and build.

A user story will help you to pinpoint the user need from the outset. It puts the user front-of-mind and gives you a focus when designing and writing the content.

Next, create a structure for your page, based on the user story. Write up meaningful H2 headers to serve as signposts to help the user do what they need to do.

Working with subject matter experts

Share your way of working with your subject matter experts – in person if possible.

They're a great way of introducing your approach to a subject matter expert, which may be completely foreign to them. It will show them how you're focusing on the user, and what you're trying to solve. Ask them for feedback. Find out if there’s anything missing and if you’re on the right track.