Expand/Collapse Widgets

Examples using native HTML, JavaScript, and pure CSS. Each widget is wrapped in an element with the "example" class and the controlled content container uses the "details" class.

Native details/summary

Project brief

This section uses the built-in HTML details/summary element for an accessible toggle without any JavaScript.

Opens and closes with keyboard and mouse.
Works across modern browsers.
Can be styled for consistent visuals.

Button-controlled region (JavaScript)

Checkbox toggle (CSS-only)

Show more Hide

This example relies entirely on CSS. Toggling the checkbox controls visibility of the content and swaps the label text.

Pros:

No JavaScript required.
Simple and performant.

Cons:

Limited dynamic behavior compared to JavaScript.
State syncing for aria attributes may need JS for full accessibility.