Expand/Collapse Widgets

Each widget is wrapped in a container with an "example" class, and the container for controlled content uses a "details" class.

Native details/summary

More information

This section expands and collapses using the native HTML <details> and <summary> elements.

  • The expanded state is controlled by the browser.
  • Keyboard support and semantics are built in.
  • You can style the summary line and the disclosure marker.

Custom accessible collapsible