Expand / Collapse Widgets Demo

1) Native details element

This widget uses the native HTML details/summary elements. Click the summary to expand or collapse the content.

You can place any HTML content inside the panel.

2) Accessible button toggle

3) CSS-only toggle (checkbox)

Content revealed by a CSS-only toggle. When the checkbox is checked, this panel becomes visible. This demonstrates a pure CSS approach to show/hide content.