Expand/Collapse Widget Demo

What is HTML details/summary?

The details and summary elements provide a native disclosure widget with accessible semantics. Use them for simple expand/collapse sections.

Tip: The open attribute controls the initial state and can be toggled by the user.

Custom Expand Widget (controlled with JavaScript)

This is a custom expand/collapse widget. The content is contained in a container with the class "details" and its visibility is toggled via JavaScript.

  • Accessible: aria-expanded on the button and region labeling.
  • Animated: smooth height transition for a polished feel.