Native element
This uses the built-in HTML <details> element with a <summary> trigger.
What is an expand/collapse widget?
An expand/collapse widget lets users reveal or hide additional content on demand. The native <details> element provides this behavior without custom JavaScript.
- Keyboard accessible out of the box
- Semantic and easy to style
- Works across modern browsers
Custom toggle with a button
This example uses a button with aria-expanded and aria-controls to manage a collapsible region.
Description
This controlled content is wrapped in a div with class details. Toggling the button updates aria-expanded and the visibility of this region.
Use this pattern when you need custom behavior, dynamic labels, or to coordinate multiple toggles.
Accordion (single section open)
Only one section stays open at a time. Each item’s content container has the details class.
Accordions condense related content into manageable sections, reducing scrolling and cognitive load. They are useful for FAQs, filter panels, and step-by-step instructions.
- Use a native button for the trigger
- Maintain
aria-expandedstate - Relate trigger and content with
aria-controls - Provide meaningful labels for the buttons
Yes. Remove the shared data-group attribute or modify the script to allow multiple open sections. This demo uses a group to keep only one section open at a time.