Expand/Collapse Widgets
Three common patterns for disclosure: native details, a button-controlled region, and a simple accordion. Each example is wrapped with a div that has an example class, and the container for controlled content has a details class.
Example 1: Native HTML details
More about this component
The native <details> element provides built-in expand/collapse functionality with keyboard and mouse support.
- Click or press Space/Enter on the summary to toggle.
- It exposes the
openproperty and attribute. - You can fully style the summary and the content area.
Example 2: Button-controlled disclosure
Press the button again to collapse.
This pattern uses a button with aria-expanded and aria-controls to toggle a region. The region is hidden using the hidden attribute.
It’s easy to reuse and style across different parts of an application.
Example 3: Simple accordion
Section One content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat sem in sapien facilisis, in vehicula libero ultrices.
Section Two content
Integer dignissim, risus vitae pulvinar cursus, neque massa gravida orci, ut bibendum tortor mi ut tortor.
Section Three content
Aliquam erat volutpat. Curabitur a dolor sed sem congue sollicitudin. In hac habitasse platea dictumst.