Examples of an accessible expand/collapse widget. Each widget is wrapped in a div.example. The controlled content container uses the class details.
details
This is a simple example. The content is hidden by default and revealed when the button above is activated.
Preview image:
This panel demonstrates that the expanded region can contain arbitrary content, such as images, paragraphs, lists, or form controls.
Try resizing the viewport to see how the content flows.
This example contains another small expander inside it to show nested behavior.
Nested content is supported. Widgets operate independently.