Examples of both a native HTML widget and an ARIA-controlled custom widget. Each widget is wrapped in an element with class example, and the controlled content uses the class details.
This uses the built-in <details> element. Click the summary to expand.
An expand/collapse widget allows users to reveal or hide additional information on demand. It keeps pages concise while still offering details when needed.
Tip: The native element manages focus, keyboard, and accessibility out of the box.
This version uses a <button> with aria-expanded and aria-controls to toggle the content container.
The button updates its aria-expanded attribute while showing or hiding this container. Screen readers announce the expanded state and the relationship via aria-controls.
aria-expanded.details.Each button controls its own details container.
This section starts expanded. Use the button to collapse or expand it again.
You can add any markup here, including lists, images, and code samples.
You can nest collapsibles. Both containers use the class details.
This panel contains another collapsible section:
Nested content inside a second <details> element.