details-polyfill
Advanced tools
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.
<details>.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').
<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.
.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
FAQs
Polyfill for the HTML5 `<details>` element
We found that details-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.