Examples of collapsible sections using native and custom controls. Each widget is wrapped in a div with class "example", and the container for controlled content uses class "details".
This section uses the native HTML details/summary elements, which provide built-in expand/collapse behavior and accessibility. Click the summary to toggle visibility.
Version 2.4.0 introduces performance improvements and bug fixes.
It’s a UI component that shows or hides content when activated. This example adds a smooth animation for opening and closing.
Yes. The button uses aria-expanded and aria-controls, and the controlled region is identified with aria-labelledby. The content is hidden using the hidden attribute, which removes it from the accessibility tree when collapsed.
Absolutely. Add more toggles that point to their own containers with the "details" class.