Expand/Collapse Widgets

Three approaches: native details/summary, a JavaScript-controlled button, and a CSS-only checkbox toggle.

Native details/summary

Uses the HTML <details> element; keyboard and accessibility built-in.

Project Files
  • README.md
  • index.html
  • styles.css
  • script.js
  • assets/
    • logo.svg
    • hero.jpg
Tip: You can toggle with Enter or Space when the summary has focus.

Button-controlled content

A button toggles a content container. Uses aria-controls and aria-expanded.

CSS-only checkbox toggle

No JavaScript. A hidden checkbox drives the state.

FAQ

Q: How do I install?
A: Run npm install in your project.

Q: Does it support TypeScript?
A: Yes, types are included.

Q: Can I customize themes?
A: Use the theme API in theme.config.js.

Toggle the checkbox label to expand or collapse.