Expand / Collapse Widget Examples

Each widget is wrapped with a container having class="example". The controlled content container uses class="details".

Native <details> element

This uses the built-in browser widget. The content container below has class="details".

Show basic details

The native <details> element provides expand/collapse functionality without custom scripting. Use it when you want a simple, accessible disclosure. Styling is limited by the browser, but it's robust.

Automatic keyboard support (Enter / Space).
State reflected via the "open" attribute on the details element.

Custom button-controlled panel

A simple accessible widget controlled by a button. The content container uses class="details".

Smooth animated expand/collapse

A slightly more advanced widget that animates the height for a smooth transition. The container has class="details".

Animated panels need script to adjust max-height based on content size for smooth transitions. This implementation measures the content height and sets max-height accordingly when opening.

The example also toggles aria-hidden and the button's aria-expanded attribute for accessibility.

Tip: For large or dynamic content, you may want to recalculate the target height (e.g. on window resize).