Examples of native and custom disclosure patterns
Uses the semantic HTML details element.
An expand/collapse widget reveals or hides supplementary content on demand. The native HTML details/summary pattern provides built‑in accessibility, keyboard support, and progressive enhancement.
This section starts expanded using the open attribute.
You can style summary to look like a button and the content region separately. The open attribute controls the initial state and can be toggled via script or user interaction.
A button toggles a div with a details class and appropriate ARIA attributes.
This region is controlled by the button above using aria-controls and aria-expanded. It demonstrates a custom expand/collapse approach for cases where you need full control over styling or behavior.
Because the content container has a details class, it can share consistent styling with the native details examples while remaining a simple div.
Each button controls its own div.details region independently.