Expand/Collapse Widgets Demo

Native details/summary

What is an expand/collapse widget? Click to reveal more

An expand/collapse widget lets users show or hide additional content on demand. The native HTML details/summary element provides built-in behavior and accessibility.

Keyboard-accessible by default
No JavaScript required
Works across modern browsers

Button controls a region

This widget uses a button to toggle the visibility of a content region via JavaScript.

It updates the button’s aria-expanded attribute and the content’s hidden state for accessibility.

State changes:
- aria-expanded: false → true
- hidden: true → false

CSS-only checkbox

▸ Toggle content with CSS

No JavaScript required: the checkbox’s checked state controls the content via CSS selectors.

This technique can be useful for simple interactions but may have accessibility trade-offs compared to buttons.