Expand/Collapse Widget Examples
Below are three ways to implement expand/collapse behavior. Each widget is wrapped in an element with class example, and the controlled content container uses the class details.
Native details/summary
What is an expand/collapse widget?
An expand/collapse widget allows users to show or hide additional information on demand. The native <details> element provides this behavior without custom JavaScript.
Use <summary> as the clickable control. The content inside the element (excluding the summary) is revealed when expanded.
Button-controlled panel (ARIA)
This panel is controlled by a button using aria-expanded and aria-controls for accessibility.
Press the button to toggle the content. The button text and chevron rotate to reflect the state.
Checkbox/label (CSS-only)
This example uses a hidden checkbox and a label. Clicking the label changes the checkbox state, and CSS shows or hides the content.
No JavaScript is required, and keyboard users can toggle it by focusing the label and pressing Space.