Three widgets demonstrate toggling content. Each widget is wrapped in an element with the class example, and the controlled content container uses the class details.
A button toggles a content region. The content container has class details.
This is a simple expand/collapse panel controlled by a button. It uses the aria-expanded and aria-controls attributes for accessibility.
details.Uses the built-in <details>/<summary> element. The visible content inside is wrapped in a container with class details.
An accordion where only one section opens at a time. Each section's controlled content container uses the class details.
An accordion is a vertically stacked list of sections where one section can be expanded while others remain collapsed.
Use Tab to focus a header button, then press Enter or Space to toggle it.
This example limits to a single open section. Remove the data-accordion attribute on the widget container to allow multiple open sections.