Overview
This page demonstrates two accessible expand/collapse widgets. Each widget is wrapped with a container that has the class example.
The expandable content containers use the class details so styles and scripting can target them consistently.
Both widgets are keyboard operable, provide visible focus, and avoid hiding focusable elements when collapsed.
Native details/summary (preferred)
The native <details> / <summary> element provides built-in disclosure behavior, including keyboard support and semantics.
Show native details content
Content inside a native details element remains accessible to assistive technologies only when expanded. This paragraph demonstrates text and an interactive example link.
Read more about native details
Example interactive control inside the native panel:
Custom disclosure (button + region)
When a native control is not suitable, implement a disclosure using a button that controls a region. The button must update aria-expanded
and manage the visibility of the controlled content. The content container here uses the class details.
Notes
The examples show both native and custom patterns. Native <details> is preferred when it fits the interaction. The custom pattern demonstrates how to expose the correct
ARIA attributes (aria-expanded, aria-controls) and keep content inaccessible to assistive tech and keyboard when collapsed.