This content is hidden by default and revealed when the toggle is activated. Use Enter or Space to open/close with the keyboard. The container for controlled content has the "details" class.
This content is hidden by default and revealed when the toggle is activated. Use Enter or Space to open/close with the keyboard. The container for controlled content has the "details" class.
This example starts open. The script initializes the visible state from the button's aria-expanded attribute and sets heights for a smooth CSS transition.
The container that is shown/hidden uses the class="details".
You can place interactive content inside the details container — for example another expand/collapse:
Nested content lives here. Because each controlled area uses the "details" class, the script treats them uniformly.
Try opening the outer one, then the inner one.
All interactive toggles are wrapped in a div.example and each controlled content area has class="details".