Expand/Collapse Demos

An expand/collapse widget, often called an accordion or disclosure widget, allows users to toggle the visibility of content. This pattern is excellent for managing large amounts of information by hiding details until the user requests them.

The aria-expanded attribute is crucial for accessibility. It informs screen reader users whether the collapsible content is currently visible (true) or hidden (false), ensuring the UI state is programmatically determinable.

Native HTML5 Solution

This widget uses the native <details> and <summary> HTML tags. It requires zero JavaScript to function, is semantic, and accessible by default in modern browsers.