- All Demos
- Blog post on zachleat.com: Add Responsive-Friendly Enhancements to
<details>with<details-utils>
Related work elsewhere:
npm install @zachleat/details-utils
Add details-utils.js to your bundle.
Wrap <details-utils> around one or more <details> elements to add enhancements to their behavior:
- Click outside to close (also bind an optional close button)
- Animate open and close (obeys
prefers-reduced-motion) - Force open/closed based on:
- JavaScript
- Media query
- (e.g. viewport size,
prefers-reduced-motion, evenprefers-reduced-dataif browsers ever support it 😅) - Optionally restores user state when media query does not match (use
force-restoreattribute)
- (e.g. viewport size,
- Close via
escKey- With optional Media query.
- Toggle Document Class (toggles a class on
<html>when active, useful for modals to disable document overflow)
- Renamed attribute
force-closedtoforce-close - Added
force-opento complementforce-close - Added
force-restoreto be used withforce-openandforce-close(restores state when media query does not match).