New:Socket for Asana Is Now Available.Learn more
Get Started

@zachleat/details-utils

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zachleat/details-utils

A collection of utilities to progressively enhance <details> with new features

latest
Source
npmnpm
Version
3.0.0
Version published
Weekly downloads
3.9K
39.6%
Maintainers
1
Weekly downloads
 
Created
Source

<details-utils>

  • All Demos
  • Blog post on zachleat.com: Add Responsive-Friendly Enhancements to <details> with <details-utils>

Related work elsewhere:

Installation

npm install @zachleat/details-utils

Add details-utils.js to your bundle.

Usage

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, even prefers-reduced-data if browsers ever support it 😅)
      • Optionally restores user state when media query does not match (use force-restore attribute)
  • Close via esc Key
    • With optional Media query.
  • Toggle Document Class (toggles a class on <html> when active, useful for modals to disable document overflow)

Changelog

v2.0.0

  • Renamed attribute force-closed to force-close
  • Added force-open to complement force-close
  • Added force-restore to be used with force-open and force-close (restores state when media query does not match).

FAQs

Package last updated on 27 Jul 2026

Related posts