Accordions put users in control of showing or hiding content. Accordions also help us organize information to keep screens less cluttered so that users can accomplish tasks in short, intuitive steps. And accordions can help users find content they need.
When to use accordions
An accordion gives us a way to present a large amount of content while giving users control over how much they want to see. This component is one of the best ways to satisfy user needs of control and simplicity, which are sometimes conflicting requirements.
Accordions are a key component in providing progressive disclosure, showing users just the right amount of content for that screen or step while allowing users to select additional content if they choose.
Accordions can also be used to guide users to a specific collection of content. For example, we can organize help content with accordions. Help topic categories can serve as the accordion label, and users see related articles and information when that accordion is open.
Appearance and behavior
The accordion consists of a list of groupings. Users can individually expand or collapse each one to show or hide the content contained within the grouping. Users can also open multiple accordions at the same time.
Notes about progressive disclosure
Progressive disclosure is a simple, yet powerful idea:
- Initially, show users only a few of the most important options.
- Offer a larger set of options upon request. Disclose these secondary features only if users ask for them. Most users can proceed with their tasks without worrying about the added complexity or content.
You can see additional examples of progressive disclosure in these components:
- Checkboxes: We can show additional content or choices in a form when a user selects a checkbox.
- Links: Users can show or hide additional content with show more/less links.
- Tables: We can group table rows into categories that can be expanded and collapsed.
Content guidelines for accordions and progressive disclosure
Less content is not always good. More content is not always good. Like a certain fairy-tale character, we’ve got to get it just right.
Progressive disclosure lets us organize content with the user’s needs in mind. If users are completing a multi-step task, we need to give them just enough information for the immediate step they need to take. If users are browsing through a large amount of content (especially, say, on a smaller screen), organize that content in categories that make sense to users and what they need to know.
- Keep accordion labels as brief as possible while still being clear and descriptive.
- Be ruthless in organizing content. If the information is not needed now, tuck it away.
- Set the hide-show labels in sentence case. Examples: Show more, Show less, Explore more, Got it
- Craft labels and other content with user needs, language, and expectations in mind.
- Voice and tone: Use attributes that are appropriate for the overall experience in which the progressive disclosure appears.
- Use when some content can be hidden because it is not critical to the user’s task.
- You want to declutter the interface.
- You want to simplify a complex process.
- There are options dependent upon a prior selection.
- All options and information are not critical to see at first.
- Hide critical content solely to clean up the interface.
- Hide an action if the user can easily do it without additional input.
- Hide primary actions on the page.
- Reveal content that is not contextually relevant to the user’s input.
- Nest too many layers. In other words, don’t place accordions within accordions.