When designing accordion components, there are a few common decisions that you need to make.
Multi-active vs. single active
For multi-active accordions, you can have many sections open at once. For single active accordions, only one section can be available at once.
So which is best?
As with most things, it depends on the situation. While there isn’t a golden rule, here are some factors you can take into account.
- Pro: Good for forms as they are suitable for progressive disclosure.
- Con: Bad for when, the user wants to compare copy in the same accordion. (I would say this is an edge case.)
- Pro: It gives the users more control. They can open and close as they wish.
- Con: It might get a bit unwieldy in areas with limited space with too many sections open.
- Con: The user won’t be focusing on a single section.
There are many different accordion icons you can choose from.
According to Nielsen Norman’s study on accordion icons, the caret icon is the most recognizable or expected. It is also more likely to be taped on than the text label, “Participants were equally likely to tap on either the text label or the icon, except for the caret icon, where there was a statistically significant tendency to tap on the icon over the text label.”
To read more about this study: Accordion Icons: Which Signifiers Work Best?
That being said, a ‘plus’ icon can look pretty in the right context, but one just has to acknowledge the fact that it isn’t as recognizable.
Default to open or closed
Some designers like to have one of the accordion items defaulted to open on page load. Their argument could be that they want to surface the content or show that it is an accordion. While that argument may be valid in that context, I would argue with the following: essential information should not be in an accordion. And secondly, on mobile, an open accordion may hide other information below the fold, and the user may miss it.
So, my suggestion would be: unless you use an accordion as a navigation tool, rather default it to closed.