Accordions

General information

Accordions allow users to expand and collapse sections to view and hide content. Collapsed content allows for space conservation on pages that may not have the most space.

When to use

When not to use

Components contained within it

How to use

Anatomy

Do and do not

Options

Types

Sizes

States

Variants

Modifiers

Content standards

Animation standards

Interactions

Presentation

Placement

Hierarchy

Alignment

Composability

Responsive behavior

Spacing

Accessibility guidelines

Additional Resources

• Accordion Example by the ARIA Authoring Practices Guide
• Gov.uk experimental Accordion component
• Progressively Enhanced HTML Accordion by Adrian Roselli
• Accordion (Multiselect) by Deque University
• Accordion (Tabbed) by Deque University