Examples of native and custom expand/collapse interactions. Each widget is wrapped in a container with class "example", and the controlled content container uses class "details".
Built-in expand/collapse using the details element with an accessible summary trigger.
This section uses the native details/summary elements, which provide built-in keyboard and screen reader support.
A button toggles a content region. The content container is a div with class "details".
This is a custom expand/collapse widget using a button. The button updates its aria-expanded state and shows or hides this region.
Note: The region is initially hidden via the hidden attribute.
A hidden checkbox toggles visibility through CSS. The controlled content has class "details".
This example demonstrates a CSS-only approach using a checkbox and label pair. When the checkbox is checked, the "details" content becomes visible.