Expand / Collapse Widget Examples

These examples show accessible expand/collapse controls. Each widget is wrapped with a div.example and the controlled content container uses the class "details". Use the arrow or Enter/Space to toggle; Escape closes while focused inside the details.

This simple widget demonstrates an accessible expand/collapse pattern using a button with aria-expanded and aria-controls. The content area uses the class "details" as requested and is shown/hidden with a smooth transition.

Keyboard tips: the toggle button responds to Enter and Space (native button behavior). When focus is inside the details content, pressing Escape will close the section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod, nibh a laoreet feugiat, nisl erat elementum est, id dapibus lectus lorem a magna. Curabitur a nisl ipsum.

Phasellus commodo, neque in interdum eleifend, ipsum lorem volutpat nunc, at sagittis risus arcu non velit. Donec at interdum lacus. Vestibulum id libero nec nunc gravida aliquet.

Pro tip: the script measures the content height to animate the max-height smoothly and removes the inline style after expansion so the element can grow naturally if its contents change.