Native details/summary
Uses the built-in <details> and <summary> elements.
What is an expand/collapse widget?
An expand/collapse widget lets you hide content until it is requested. This reduces visual clutter and helps users focus on the task at hand.
- Built-in keyboard and accessibility semantics
- No JavaScript required
Tip: You can style the summary and content while keeping the native behavior.
Button-controlled panel
A button toggles the visibility of a controlled region.
CSS-only toggle (checkbox)
A visually hidden checkbox drives the disclosure with pure CSS. JavaScript syncs ARIA for accessibility.