Examples of both native and custom expand/collapse interactions. Each widget is wrapped in a container with the class “example”, and the controlled content container uses the class “details”.
Uses the built-in <details> and <summary> elements.
An expand/collapse widget toggles the visibility of additional content. The native <details> element is an accessible, semantic solution provided by HTML.
Try clicking the summary line above or pressing the Enter or Space keys when it’s focused.
A button controls a separate region. ARIA properties convey state.
This custom widget uses a button to toggle a content region. The button’s aria-expanded state reflects whether the content is shown, and the region references the controlling button with aria-labelledby.
Multiple independent sections using native details elements.
Yes. Each <details> element is independent, so you may open multiple sections simultaneously.
Prefer native <details> for simple disclosure patterns. Use a custom button when you need bespoke behavior or styling beyond what <details> offers.
<button> elementaria-expanded correctlyaria-controls and aria-labelledby