Polyfill for the HTML5
<details>element, no dependencies
details-polyfill is available via npm.
npm install --save details-polyfill
Requiring it will immediately inject the needed behaviors.
require('details-polyfill')The file index.js is also usable as a standalone script.
Just include the script on any page that uses <details>.
In case the browser doesn't support <details>, it adds the following behaviors:
- When clicking
details > summary, it toggles theopenattribute indetails.
It also adds these CSS styles:
summary:beforeis styled with a disclosure triangle.details:not([open]) > :not(summary)elements are hidden. (that is: all children of closeddetails, exceptsummary)- The
<html>element gets theno-detailsclass.
Keep these guidelines in mind.
The <details> element must not have loose text inside it. Everything inside it should be in elements.
<!-- ✗ This will NOT work -->
<details>
<summary>More info...</summary>
No info available.
</details><!-- ✓ But this will -->
<details>
<summary>More info...</summary>
<span>No info available.</span>
</details>...unless it's for a disclosure triangle. This library uses summary::before to create a default triangle.
The summary element must also be the first child of the details element. Browsers supporting the details element natively will hoist summary elements up, but details-polyfill.js won't.
...will not work like how you think it does. You also need to do .setAttribute('open', 'open') or .removeAttribute('open').
Here are a few other polyfills for <details>.
I wrote this because everything else out there either depend on big libraries, or are too complicated. In contrast, details-polyfill has <100 lines of code, and only comes with a .js file.
- better-details-polyfill - depends on better-dom-boilerplate.
- manuelbieh/Details-Polyfill - depends on jQuery.
- html5-details-jquery - depends on jQuery.
- jquery-deets - depends on jQuery UI.
- Element.details - supports legacy IE, but is harder to implement (has
.htcfiles). - Complete polyfill for the HTML5 details element (smashingmagazine.com)
- Cross browser polyfills (github.com/modernizr)
details-polyfill © 2016+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).
ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz