Polyfill for the HTML5 <details> element, no dependencies
MIT License
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.
In case the browser doesn't support <details>
, it adds the following behaviors:
details > summary
, it toggles the open
attribute in details
.It also adds these CSS styles:
summary:before
is styled with a disclosure triangle.details:not([open]) > :not(summary)
elements are hidden. (that is: all children of closed details
, except summary
)<html>
element gets the no-details
class.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.
el.open = true
...will not work like how you think it does. You also need to do .setAttribute('open', 'open')
or .removeAttribute('open')
.
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.
.htc
files).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