Three progressively enhanced examples. Each widget is wrapped in a div.example. The container for controlled content uses the class "details".
Native <details> (semantic)
Uses the native details/summary element. The visible content container has class="details". Works without JavaScript.
Quick summary — native details
▾
This content is inside a native <details> element. We still apply the details class to the controlled content so it matches the other examples. Native details manage open/close state automatically and are keyboard accessible by default.
Custom toggle (button + controlled div)
An accessible pattern using a button with aria-expanded and aria-controls. The content container has class="details".
This content is controlled by the button above. JavaScript toggles the open class on the element with class details, and updates aria-expanded on the button as well as aria-hidden on this region.
Accordion (one open at a time)
Multiple items where opening one closes the others. Each controlled content element uses class="details". Buttons use aria-expanded and aria-controls.
▾
Content for section A. When you open this, other sections in the accordion will close automatically.
▾
Content for section B. Try opening multiple sections — the script keeps only one expanded.