Examples of native and custom disclosure components. Each widget is wrapped in an example container and the controlled content is inside a details class.
An expand/collapse (also called disclosure) lets you reveal additional content on demand, helping keep interfaces clean and scannable.
<details> provides built-in semantics and keyboard support.<summary> element acts as the toggle control.Custom disclosures are useful when you need more control over styling, animation, or behavior than the native element allows.
aria-expanded, aria-controls, and aria-labelledby.hidden attribute to manage visibility.Overview content with general information and context.
Advanced settings for power users.