Native details/summary
Uses the built-in HTML <details> element. The controlled container is the details element with class details.
What is an expand/collapse widget?
An expand/collapse widget reveals additional content on demand. This native widget is keyboard accessible and toggles with the Space or Enter keys on the summary.
- Uses semantic HTML.
- No JavaScript required for basic behavior.
- State is reflected via the
openattribute.
Custom toggle button
A button controls a separate region. The controlled container is a div with class details.
Custom toggle section
This custom pattern uses ARIA to announce expanded/collapsed state. It also animates open/close for a smoother experience.
Tips:
- Keep the toggle focusable with a
button. - Use
aria-controlsandaria-expandedfor assistive tech. - Set
role="region"and an accessible label on content.
Pre-opened section
Starts expanded by default via the open attribute. The controlled container is the details element with class details.
Helpful resources
Explore more: