Feedback has identified a user need for accordions to include an optional Expand all / Collapse all function. We would like to share our insights below and encourage everyone to share your feedback, research and insights into the proposed update.
Identified user needs
- Users with fine motor skill difficulties may have trouble expanding and collapsing multiple accordions
- Users wishing to view content in multiple accordions and therefore expand more than are left collapsed, ie. a step by step processes.
- Allow users to collapse all accordions in one action instead of individually, to easily scroll down to information below
This 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.
Proposed update
Addition of optional “Expand all” and “Collapse all” actions that can be added to the top right of the current accordion component.
Having the two separate actions allow for a user to perform their required action in one click when accordions are in both states. Two actions have been chosen over one, as displaying only one action could cause uncertainty or result in two clicks to achieve desired action.
Using the terminology Expand all / Collapse all:
- Is widely used by screen reader technology
- Describes the exact action occurring
- Avoids terms that also refer to other interactions which can be confusing for users, ie Open and close.
How it works
“Expand all” would expand all accordions that are in the collapsed state, and “Collapse all” would collapse all accordions that are in the expanded state. When an action would not change the state of any accordions, that option will be displayed as a disabled link. Ie. “Collapse all” would be disabled on page load when all accordions are already collapsed. This clearly indicates and lets the user select only the available action.
UI Design
Credits
These awesome collaborators have contributed insights, knowledge, and time to the information above:
@jennifer.weiley and @RachaelQuigley
2 Likes
Hi Community! I’d like to share with you the latest updates with our accordion component. We’ve received feedback that the UI Design of the current component is visually heavy and the title of the accordion doesn’t work well when it contains hierarchical content.
To address this feedback we are proposing an update to the current component design on top of the added optional Expand/Collapse functionality, please find this attached.
Updates include:
- Removal of the NSW Blue left border that spanned the title and content
- Update accordion title to H4
- Retained background colour to keep visual distinction from list link
As always we appreciate your feedback on these changes.
Credits
These awesome collaborators have contributed insights, knowledge, and time to the information above:
@adham
Hi @amy.howard - Brilliant to see the progress being made on this. A few tricky things and lessons learnt that I would like to see tested in the designs.
-
Headings within accordions: is the accordion heading going to be a class based on the H4 style? I think that affects accessibility but @Charissa would know. Does this mean we would use heading level 3 for subheads within a table? See https://www.service.nsw.gov.au/active-kids-faqs-parents-guardians-and-carers#applying-for-a-voucher
-
Tables within accordions: Our current accordion design doesn’t have a grey background and so tables get a bit lost. I think the proposed design solves this. Please test responsive tables inside accordions as we previously discovered a technical glitch with this combination. There also seems to be something strange happening with tables when the top row of a table is formatted as a header row - some of the tables don’t correctly apply the format inside the accordion. (See screenshot.)
-
Headings as anchor tags: Our current design assigns an anchor tag to the accordion heading automatically. This is a nice feature I’d like to retain.
-
Anchor tags activate the accordion in an open state, at the top of the page. We use this on the Revenue NSW website.
-
Interaction with other design elements: Could you also test a call-to-action button inside an accordion. I don’t anticipate any issues but we didn’t think the responsive table would be a problem either.
Hi @jennifer.weiley Thanks for your feedback!
Headings within accordions: This might be an issue with our guidance. The accordion title will be styled same as H4 to give visual hierarchy, however the title’s markup is interchangeable and you can use your preferred heading or div tags to align with prior headings for accessibility. What content is displayed within each accordion is dependant on individual user needs.
Table within accordions: we can look into this, are you able to provide more information on the glitch you are experiencing? Also in your screen shot, which header row is not appearing correctly?
Headings as anchor tags: are you able to provide an example where you would anchor an individual accordion? Could this content be taken out of the accordion if it’s a section that needs to be visible?
Call to action button: When a button is contained within an accordion and the width of the viewport is longer than the button title, the button text breaks over two lines so shouldn’t have an issue.
Thanks,
Amy
Thanks @jennifer.weiley for the further info! We tested tables in the accordions and sadly wasn’t able to replicate the issues. Is the page still live on nsw.gov.au where the bug is happening? Great to have the heads up with the other components as well, we’ve done testing on buttons and other text elements so shouldn’t run into any issues using those components in accordions.
Thanks for the headings as anchor tags example too, we’ll look into that usage 
