details-utils
The <details> element is one of the best additions to HTML; a disclosure widget with zero lines of JavaScript required... until you want more features.
<details-utils> by Zach Leatherman is a wrapper around the native <details> element that gives it new behaviors like
- Close on click outside
- Close on
ESC - Animation!
- More...
Example
html
<details-utils close-click-outside="(min-width: 48em)" close-esc animate>
<details id="my-details">
<summary>My demo</summary>
<div>
<p>This is content</p>
</div>
</details>
</details-utils>
<script src="https://cdn.skypack.dev/@zachleat/details-utils" type="module"></script><details-utils close-click-outside="(min-width: 48em)" close-esc animate>
<details id="my-details">
<summary>My demo</summary>
<div>
<p>This is content</p>
</div>
</details>
</details-utils>
<script src="https://cdn.skypack.dev/@zachleat/details-utils" type="module"></script>