Accordion

Explanation:

An accordion is a UI element that allows users to toggle the display of sections of content. It consists of vertically stacked items that can be expanded or collapsed to show or hide associated content.

Overview:

Accordions are useful for organizing content in a space-efficient manner. They allow users to quickly access information without overwhelming them with too much content at once.

When to use:

• To improve navigation on pages with extensive content.

• When you want to present users with a summary or choice before diving into details.

• In FAQs, where questions can be browsed and expanded for answers.

When not to use:

• For content that needs to be visible at all times.

• If the content within the sections is necessary for completing immediate tasks.

Formatting:

Accordions should be formatted with clear indicators for expand/collapse actions, usually with a caret or plus/minus icon.

Anatomy:

• Header: Displays the title of the section and serves as the control for expansion.

• Icon: Indicates whether the section is expanded or collapsed.

• Panel: Contains the content revealed upon expansion.

Alignment:

The accordion’s headers and icons should align with the rest of the interface elements for consistency.

Placement:

Place accordions in a context where they naturally fit into the workflow without disrupting the user's task progression.

Content:

Ensure headers are succinct and descriptive. The content should be well-organized and easily scannable.

Behaviours:

Accordions should default to either all collapsed or with the first item expanded, depending on the context. They should allow for multiple sections to be expanded simultaneously if needed.

Interactions:

The accordion should expand or collapse upon user interaction, with immediate visual feedback. Ensure that the action is reversible.

Reference:

Accordions for Complex Website Content on Desktops