This uses the HTML <details> and <summary> elements.
It supports keyboard and mouse out-of-the-box and can be styled to fit your UI.
Because the container is the details element itself, it has the details class.
Examples of native and custom expand/collapse interactions. Each widget is wrapped in an element with the example class, and the container for controlled content has a details class.
This uses the HTML <details> and <summary> elements.
It supports keyboard and mouse out-of-the-box and can be styled to fit your UI.
Because the container is the details element itself, it has the details class.
This panel is controlled by a custom button using JavaScript.
The container for the controlled content has a details class and is initially hidden.
Click the button again to collapse.
An accordion lets users expand one section at a time to reveal content while keeping other sections collapsed.
It saves space and helps focus by showing only one chunk of information at a time.
This example allows only one panel to be open at a time, but you can configure it to allow multiple panels if desired.