Accordion group

Component checklist

Behavior

Single Open Accordion

Only one accordion can be open at a time within the group. When a new accordion is opened, the currently open accordion automatically closes.

Use case

When you want users to focus on one section at a time.

Advantages

Promotes a more streamlined and focused reading or interaction experience, and helps prevent information overload.

 

Multiple Open Accordions 

Multiple accordions can be open simultaneously within the group. Each accordion operates independently of the others.

Use case

When users may need to reference multiple sections simultaneously.

Advantages

Allows users to see and compare content across multiple sections without closing others. This is useful when information in different sections is related or complementary.

 

Nested accordions

In some complex UI scenarios, you may need to nest an accordion within another accordion. This section describes how nested accordions behave and how to manage their interactions to ensure a seamless user experience

Individual Operation

• Each nested accordion operates independently of its parent accordion.
• The opening and closing of a nested accordion do not affect the state of the parent accordion or any sibling accordions

Controlled State

• The state of both the parent and nested accordions can be managed by a parent component or external state management.
• This allows for precise control over which accordions are open or closed, providing flexibility in complex UI structures.

 

Additional Tips

• Usability Testing: Test both variants with users to determine which variant is more user-friendly for the given context.
• Consistency: Ensure the behavior of accordions is consistent throughout the application so that users know what to expect.
• Information Availability: Consider how much information you want to display to users at once. If there is a lot of information, a single open accordion might be better.
• Visual Hierarchy: Use multiple open accordions if you want users to see and compare more information at once. Use a single open accordion if you want to emphasize the sequence or hierarchy of information.