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.
The file index.js is also usable as a standalone script.
How it works
Just include the script on any page that uses
In case the browser doesn't support
<details>, it adds the following behaviors:
- When clicking
details > summary, it toggles the
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 closed
<html>element gets the
Keep these guidelines in mind.
No loose text
<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>
Don't style summary::before
...unless it's for a disclosure triangle. This library uses
summary::before to create a default triangle.
Summary as first child
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.
el.open = true
...will not work like how you think it does. You also need to do
.setAttribute('open', 'open') or
Here are a few other polyfills for
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
- 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