https://github.com/zachleat/details-utils

A suite of utilities to add more features to the <details> element.
https://github.com/zachleat/details-utils

Last synced: about 8 hours ago
JSON representation

A suite of utilities to add more features to the <details> element.

• Host: GitHub
• URL: https://github.com/zachleat/details-utils
• Owner: zachleat
• License: mit
• Created: 2022-01-28T23:05:04.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-07T18:56:50.000Z (about 1 year ago)
• Last Synced: 2025-01-19T14:12:53.736Z (7 days ago)
• Language: JavaScript
• Homepage: https://zachleat.github.io/details-utils/demo.html
• Size: 44.9 KB
• Stars: 262
• Watchers: 7
• Forks: 13
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-standalones - `<details-utils>`

README

        
# ``

* [All Demos](https://zachleat.github.io/details-utils/demo.html)

* [Blog post on zachleat.com: Add Responsive-Friendly Enhancements to `` with ``](https://www.zachleat.com/web/details-utils/)

Related work elsewhere:

* [`spicy-sections`](https://github.com/tabvengers/spicy-sections)

## Installation

* [Available on npm](https://www.npmjs.com/package/@zachleat/details-utils)

```

npm install @zachleat/details-utils

```

Add `details-utils.js` to your bundle.

## Usage

Wrap `` around one or more `` 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 `` 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).