Native HTML details element
Uses the native details/summary for toggling.
What is an expand/collapse widget?
An expand/collapse widget allows users to reveal or hide additional information on demand. It helps keep interfaces tidy while still giving access to more detail when needed.
This example uses the built-in details and summary elements, which are accessible and require no JavaScript for basic toggling.
Custom disclosure controlled by a button
A button toggles the visibility of a dedicated container.
This container has a "details" class and is controlled by the button above.
Click the button to expand or collapse this content. The button’s aria-expanded attribute is updated to reflect the current state.
Details with pre-open state and nested content
Demonstrates an initially open details widget.
Release notes (v2.4)
Highlights:
- Improved performance on large datasets
- New keyboard shortcuts for navigation
- Accessibility refinements throughout the app
Nested details:
See bug fixes
- Fixed a race condition in background sync
- Resolved focus trap issue in modal dialogs
- Corrected theme contrast in high-contrast mode