Skip to main content

Expand/Collapse Widget Examples

Demonstrations of accessible expand/collapse patterns.

Example 1: Native <details> Element

Click to expand more information

This is a native HTML <details> element. It provides built-in accessibility features including keyboard navigation (Space/Enter to toggle), proper ARIA semantics, and focus management. The browser handles all interaction patterns for you.

Example 2: Custom Button-Based Widget

This is a custom expand/collapse widget built with a button element and JavaScript. The button manages the expanded/collapsed state using aria-expanded and controls a region using aria-controls. The icon rotates to provide visual feedback.

Example 3: Multiple Expandable Sections

Section One

This is the first section. Each section is independent and can be expanded or collapsed separately.

Section Two

This is the second section. Users can expand multiple sections at the same time or collapse them individually.

Section Three

This is the third section. The keyboard is fully supported: use Tab to navigate between summaries and Space/Enter to toggle each one.