A place for NSW Government digital creators to collaborate, share and learn.
I’d like to see the addition of an open/close all for our accordions. I have noticed it in other design systems including, you guessed it, Gov.UK accordions – and interestingly, it wasn’t always there.
Has this option been explored at all? Any reason why we would specifically not do it?
@Charissa - do you know of any accessibility issues with open/close all accordions? Does it make things easier for people with fine motor skill issues?
Hi @hamish.stead - do you have any objections to the addition of an open all/close all button so we can view all accordions in a section in an open state? Particularly useful for pages like Common questions about the COVID-19 rules because the accordions are in sections so a user might be interested in all of that content for the topic. I also suspect it might aid usability for all users and particularly for those with fine motor skills issues.
Incidentally, the Revenue website in its previous incarnation also had an open/close button that worked for all accordions on a page. This allows users to search the page with the find functionality of the browser - and I’ve been surprised to see users do exactly that. Appreciate your thoughts on this.
Hi @mmaarhuis - I noticed you use the show/hide all button on the Transport website - How to renew.
Do you have evidence that helped you in the decision to add this function to the accordion component? I’m keen to add it to nsw.gov.au.
Hi Jennifer, I’ll allow Rachael to speak to our specific project. She’s on leave this week so may not respond immediately.
Hi @jennifer.weiley - @tjharrop may be best to answer now he’s settled in.
FWIW it could be designed, but it may be more of an issue with the volume of content if it’s necessary. Are there any insights from users with all accordions open?
Hi @RachaelQuigley - interested in your findings about the open/close button for sets of accordions. My theory (based on conversations with a friend who has Parkinson’s) is that it would be helpful to people with fine motor skills issues. I’m finding it hard to come up with a solid reason why we would not use it.
We also have an unnatural obsession with accordions and I think our site would benefit from more judicious use rather than using them to reduce scroll. Hiding content in accordions has user, SEO, CMS and analytics implications that we need to consider. And we also need to think about whether we are using too many words.
Definitely less accordions is part of the solution - but being flexible and considering how we make them most usable (and inclusive) when they are used is definitely something we care about!
Has been quiet from the team so far but I know we’ve had some discussions - so it’s a ‘pondering’ pause. I’ll ask if there’s any early thoughts ready to be shared back here yet.
Are there any insights from users with all accordions open?
I don’t have any evidence about the use of accordions generally and even Gov.UK has some disclaimers about their use. The questions I have are:
If you’ve watched someone with a tremor or hand-eye coordination issue using a touchscreen, I’m pretty sure that having the option to hit the sweet spot just once would definitely help.
Hi @jennifer.weiley, we actually have really minimal useage on the show all function for accordions in our new content (1-2%) and we didn’t find a preference for it in our testing. That being said, we included it anyway as it does improve the experience for some people and doesn’t detract anything for others.
Absolutely agree about judicious use of accordions. For all our new content design, our policy is never to use an accordion to shorten a page (thereby hiding content). It’s only used for:
We’re keeping our eye on how it performs. It’s definitely going to be interesting to see what intended, anticipated and completely unexpected consequences play out.
@jennifer.weiley good point about ‘the sweet spot’, too. Always helpful to accessibility when we make the whole object (button, heading etc) clickable rather than just the tiny arrow or other icon 
Hi everyone, sorry for taking so long to get on to this.
It looks like we’ve started from a really good place by looking at gov.uk. The comment thread on accordions on github suggests that conversation has been active for 2 years. I’m even more pleased we have our own insights to add to those, so thanks for posting those Rachael.
As we structure our components around user goals (of various sizes) we’ll be creating more content around when to / when not to use a certain component. @RachaelQuigley would it be OK to catch up about what you have and see if that can become the first version of our advice?
On top of that I might contact the gov.uk folks and see what the latest was for them. We might be able to feed more up-to-date insights back.
On nsw.gov.au, far more accordions are opened than are closed. Having an open all would significantly reduce mechanical load for our users. This data is for December 2020 to January 2021.
Following on from our conversation @amy.howard, here’s a bad pattern to be avoided – only one accordion opens at a time. And don’t get me started on FAQs!
https://www.eastershow.com.au/safety-at-the-show/covidsafe/
Alberta on the other hand leaves the opened accordion open and has persistent open/close buttons that work regardless of how many accordions you have opened.
Thanks for those examples @jennifer.weiley, especially the Alberta Government one! It’s a good example of using the two buttons over one that switches state, which could solve those functionality issues. I’ll do some deep diving and see what else I can find on the double button usage. Thanks again!
I think we could improve on the button labels @amy.howard with plain English for expand/collapse = open/close or show (read?)/hide.
