This uses the native HTML details/summary element. It is collapsed by default and expands when you click the summary.
- No JavaScript required
- Accessible by default
- Works across modern browsers
Examples of native and custom expand/collapse widgets. Each widget is wrapped with a div.example and the controlled content uses the details class.
This uses the native HTML details/summary element. It is collapsed by default and expands when you click the summary.
This panel starts expanded using the open attribute.
This is a custom expandable content area controlled by a button. It uses ARIA attributes to announce the expanded state to assistive technologies.
Tip: You can style and animate this panel however you like.
Accordions present multiple sections where only one panel is open at a time. Clicking a different header closes the current panel and opens the new one.
Q: Can I customize the theme?
A: Yes, adjust the CSS variables at the top to match your brand.
Hint: This accordion example enforces a single open panel within this widget.