Expand/Collapse Widgets

This page demonstrates expand/collapse widgets using native details and a custom disclosure pattern.

Native details element

What is an expand/collapse widget?

An expand/collapse widget lets you reveal additional content on demand. The native HTML details element provides a built-in disclosure with keyboard and assistive technology support.

  • Click or press Enter/Space on the summary to toggle.
  • Use the Arrow keys to navigate anchor links inside.

Button-controlled disclosure (custom)

Collapsed

Additional information

This panel is controlled by the button above using ARIA attributes. It demonstrates a custom expand/collapse that can be animated.

It uses CSS to animate between states and updates aria-expanded for accessibility.

Accordion (only one open at a time)

First section

Content for the first section. Opening this will close others.

Second section

Content for the second section.

Third section

Content for the third section.