Expand/Collapse Widgets

Basic Expand/Collapse

This simple widget uses a button to toggle the visibility of the content. The button’s aria-expanded attribute and the content’s hidden attribute stay synchronized to keep things accessible.

Keyboard users can tab to the button and press Enter or Space.
Screen readers announce the expanded state automatically.
The layout adjusts smoothly without animation.

Animated Panel

This panel adds a touch of animation by transitioning the maximum height and opacity. The JavaScript calculates the natural height when expanding to ensure the animation is smooth.

Highlights

Smooth transition
Accessible toggling
No layout shift

Usage Tips

Use transitions sparingly and respect the prefers-reduced-motion media feature for users who opt out of animations.

FAQ Accordion

What is an expand/collapse widget? ▼

An expand/collapse widget reveals or hides additional information when a control—usually a button—is activated. It helps manage dense content and keeps interfaces tidy.

How do I keep it accessible? ▼

Tie the button to the controlled region via aria-controls, update aria-expanded as the state changes, and toggle the hidden attribute (or aria-hidden) on the content.

Can multiple answers stay open? ▼

Yes. This example allows each item to toggle independently. If you want a true accordion where only one panel is open at a time, close the others when a new one is expanded.