Native Details/Summary
Uses the built-in HTML <details> and <summary> elements.
▸Show more information
This content is revealed by the native details/summary widget. It is keyboard accessible and manages its own open state.
- Tab to the summary and press Enter or Space to toggle.
- The open state can be read via the element's
openproperty.
The container for the content has a class of details on the <details> element.
Button-controlled Collapsible Region
A <button> toggles a region referenced by aria-controls. The button reflects the state via aria-expanded.
This region is toggled by the button. Assistive technologies can associate it with the control using aria-controls and aria-labelledby.
Common use cases include expandable help text, filters, or advanced settings panels.
The controlled content container has a class of details on the <div> element.