This page demonstrates both the native HTML details/summary and a custom button-controlled expand/collapse. Each widget is wrapped in a container with class "example", and the controlled content container has class "details".
An expand/collapse widget reveals additional content on demand. The native details element provides built‑in keyboard and screen reader support via its summary control.
Using the native element keeps markup minimal while providing accessible defaults. You can style the summary and the open state as needed.
This custom widget uses a button to control visibility of a content panel.
The button maintains the aria-expanded attribute and references the panel through aria-controls for assistive technologies.
Content for section A.
Content for section B.
Content for section C.