Expand/Collapse Widget Examples

Each widget is wrapped in a div.example, and the controlled content container uses .details. Use mouse or keyboard (Tab then Enter/Space) to toggle.

JavaScript-controlled panel Button toggles a .details region

This is the controlled content. It expands and collapses with a small animation.

Accessible Animated No dependencies

Start open Same widget, initially expanded

You can start a widget open by setting data-open="true" and matching ARIA states.

Try toggling it, then use the buttons below to programmatically open/close.

Native <details> element Included as a reference pattern

Toggle native details

This panel uses the browser’s built-in <details> behavior.

It still satisfies the requirement that the controlled content container has a details class (this outer container).