Accessible examples of an expand/collapse widget. Each widget is wrapped in a div.example; the controlled content container uses the class "details".
This is the additional information that is hidden by default. It becomes visible when the toggle is activated. Use the button to open and close the content.
Tip: The button uses aria-expanded and aria-controls for screen readers.
This widget starts open. The script initializes state based on aria-expanded so this content is visible on load.
Example of an initially-open widget.
Inside this panel there's another small expand/collapse control.
Nested content can also be expanded independently.
Nested widgets follow the same structure and use the "details" class for the controlled containers.