Expand/Collapse Widget

Two examples: one uses custom JavaScript (with animation), and one uses native with a controlled content container marked as details.

Example 1: Custom button + controlled panel

Animated, accessible

Example 2: Native <details> + summary

No JS required
Read the FAQ

The browser provides expand/collapse behavior automatically.

  • Q: Is it accessible? A: Yes, by default.
  • Q: Can I style it? A: Yes, via CSS.
  • Q: Can the controlled content still use .details? A: Yes, as shown.

Animations are disabled if reduced motion is enabled in your system settings.