Native Details Element
Built-in browser disclosure using details/summary, with the container carrying a “details” class.
What is a details/summary?
The details and summary elements provide a native, accessible expand/collapse control. Clicking the summary toggles the visibility of the content within the details element.
- No JavaScript required
- Keyboard accessible and announced by screen readers
- Can be styled with CSS
Button-Controlled Panel
A custom toggle button controls a content container with the “details” class.
This panel is shown and hidden via JavaScript by toggling the hidden attribute. The button’s aria-expanded value updates to reflect the current state.
Use this pattern when you need fine control over behavior, animations, or synchronized UI changes across multiple elements.
Accordion (Single-Open)
A group of disclosures where only one can be open at a time. Each content panel uses the “details” class.
Single-open means when you expand one item, any other open item in the same group automatically collapses. This keeps the interface compact and focused.
Buttons are focusable and announce their expanded state via aria-expanded. Each panel is a region labelled by its controlling button. Ensure content is readable and focus remains logical.
Yes. Each accordion group has its own data-accordion identifier so they operate independently. Mix and match native details and custom widgets as needed.