This page demonstrates a native HTML details element and custom button-controlled sections. Each widget is wrapped with a container that has the "example" class, and the controlled content container has the "details" class.
The <details> element provides built-in expand/collapse behavior across modern browsers. Clicking the summary toggles the open state.
Learn more in the MDN docs: MDN <details>.
This section is controlled via a button and toggles the visibility of a container with the details class. The button updates aria-expanded and the content is shown/hidden."
This is a second instance demonstrating independent state.
It also supports a simple animated open/close using CSS grid trickery, and respects the user's prefers-reduced-motion setting.
Use these controls to expand or collapse all custom widgets above. The native <details> widget remains independent.