How to Use Accordions for Progressive Disclosure

An accordion menu typically starts in a collapsed state, meaning the content is hidden and requires a click or tap to expand. To show that more content is inside, you can place a downward-facing arrow or a caret (▾) beside each item. This keeps the layout neat while still giving a clear cue that the item can open.

Conventionally, arrows (→) or plus icons (+) are used as well, but a study by the NN Group found that only the caret stands out to users in a clear way.^[1]

Think of a collapsed accordion menu as labeled drawers — each label gives a hint of what's inside. When a user expands the menu, it serves its primary purpose — to unveil the full content and allow users to explore in-depth.

Use a plus sign (+) or down arrow (⌄ or ▼) to show a collapsed section. When the section is expanded, switch to a minus sign (−) or up arrow (⌃ or ▲). This tells users that the content is visible and can now be collapsed.

The hover state is activated when users move their cursor over an interactive element, effectively signaling, "This is clickable!" To ensure clarity, provide at least two visual cues indicating the component's hover state. A combination of a pointer cursor and a color change, for example, is sufficient to convey the element's interactivity.

Each accordion section's container should be spacious enough to make the content scannable. Ample spacing is also essential for creating accessible and comfortably large clickable areas, enhancing usability.

On mobile devices, ensure touch targets are especially user-friendly with a recommended minimum height of 44 pixels, adhering to accessibility standards.^[2]

Styling the content area of an accordion section similarly to the rest of the design maintains consistency and reduces confusion. To differentiate the content from the title, simply use a distinct font style to indicate hierarchy without overwhelming users.

Avoid cluttering with non-essential links, buttons, or additional subsections inside the content area, as this can make the interface complicated and challenging to navigate.

Accordions typically auto-collapse open sections when users click a new one. While this keeps the page tidy and reduces manual actions, it prevents users from comparing content across multiple sections, a significant limitation when information is interconnected.

The best approach depends on your users' needs. Allow multiple sections to stay open when users need to compare information or when sections contain related content. This works well for accordions with fewer than 10 sections, as scrolling is easier and requires less cognitive load than repeatedly clicking to reopen sections. Auto-collapse only makes sense in specific situations: when sections contain unrelated content, when you have very few sections (3-5), or when screen space is severely limited.

As a general rule, default to allowing multiple open sections unless you have a compelling reason to auto-collapse. Remember that users find scrolling through expanded content far easier than clicking to constantly reveal information they need to reference.

Upon expanding an accordion section, a subtle yet distinct color or style change can effectively indicate its active state. The background or text color might shift to a different shade or a completely new color, distinguishing the expanded section from the others.

Additionally, stylistic alterations such as bolder text or more pronounced borders can draw attention to the active content. These visual cues should be both consistent across all sections and subtle enough to maintain the overall design integrity, ensuring an intuitive and clear navigation experience for users.

The placement of icons on either the left or right side of an accordion section has a minimal impact on functionality, but consistency in their placement is crucial.

By positioning the icons uniformly — either all on the left or all on the right — across each section, users can scan the menu smoothly without the visual interruption of zigzagging lines. This prevents eye strain and cognitive overload, as users don't have to adjust to different placements with each new section.

Properly styled headings are vital in creating a clear type hierarchy within accordions, guiding the reader's eye to the start and end of each section while providing visual breaks between them.

To optimize their effectiveness, headings should distinctly stand out from the body text. Employ strategies like using a larger font size, a different typeface, capitalization, or a bolder font-weight to make them noticeable.

However, balance is key — ensure these titles are eye-catching without dominating the page. This not only enhances readability but also contributes to a well-organized and aesthetically pleasing design.

Headings in accordions are like signposts guiding users through content. Clear, informative headings are essential; they need to be both descriptive and enticing, encouraging users to explore further. Remember, when content is hidden within accordions, it risks being overlooked. To ensure your headings resonate with users, consider these tips:

• Keep them concise and to the point.
• Use language that speaks directly to users' needs.
• Incorporate keywords for easy scanning.
• Ensure they accurately reflect the content within.

Research plays a crucial role here. By understanding what matters to your users, you can tailor headings to their preferences and questions, making your accordions not just a design element, but a valuable, user-focused tool.

Accordions aren't always the best choice, especially when users are likely to need access to most or all of the page's content. In cases where comprehensive information is crucial, presenting all content at once is preferable. Don't stress over page length; relevance is key. Avoid making users click through accordions unnecessarily, especially if they intend to consume all content in one go. When the content is related, relevant, and well-formatted, users will happily scroll.

For extremely lengthy pages, accordions may not be ideal. Consider alternative navigation, like splitting content across several manageable sections or pages, but avoid over-fragmenting into too many short pages.

If accordions are used, ensure they allow multiple sections to be open simultaneously for easy access to various content parts. The state of each section (open or closed) should persist based on user interaction.