Expand / Collapse Widget Examples

Each widget below demonstrates an accessible expand/collapse pattern. Controlled content containers use the details class.

Simple Toggle

Click the button to expand/collapse

This is a simple example of an expandable region. It uses a button with aria-expanded and a controlled content container with the details class.

Accessible: button updates aria-expanded.
Animated: smooth height transition when opening/closing.
Keyboard support: native button keys (Enter/Space) toggle state.

Initially open

This one starts open

Content is visible by default. The JavaScript will set an inline max-height to allow a smooth transition if the user collapses it.

Tip: You can include any markup inside a details container — text, images, forms, etc.

Long content (demo of animation)

The container expands to fit content height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.

Step one: identify the goal.
Step two: plan the content structure.
Step three: implement and test accessibility attributes.

Note: the JavaScript uses the element's scrollHeight to animate height precisely.