Details Element Polyfill
The <details>
element specifies additional details that the user can view or hide on demand.
The <summary>
element defines a visible heading for the <details>
element.
The heading can be clicked to show/hide the details.
The <details>
element currently has very limited cross-browser support.
This polyfill provides support for the <details> element across all modern browsers.
The polyfill is based on the spec for the details element.
- WhatWG, 4.11.1 The details element
- W3C Markup, details – control for additional on-demand information
- HTML/Elements/details Wiki
If you'd like to use the details element and don't know where to start, take a look at this tutorial The details and summary elements at the html5doctor, read the tests or clone this repo and try out the demo.
Features
- keyboard and ARIA-friendly
- fires
click
event when open state changes - fully customisable via CSS
Install
$ npm install --save lavu-details-polyfill
Usage
Use it in your page
... or require the polyfill
var polyfillDetails = ;
... or import the polyfill
;
Start using it
Show/Hide me Some content.
The script uses the load
event to polyfill the <details>
elements.
If you load HTML fragments dynamically, e.g. in a single page application, then you must call the polyfill after loading the HTML.
;
Where content
is the parent node of the loaded HTML fragment.
Notes
The polyfill provides a minimal CSS meant to mimic the default unstyled browser look which you can override in your own CSS/SASS/LESS module. Code that overrides the default CSS is provided in the snippets example.
details, details>summary { display: block;}details > summary { min-height: 1.4em; padding: 0.125em;}details > summary:before { content:"►"; font-size: 1em; position: relative; display: inline-block; width: 1em; height: 1em; margin-right: 0.3em; -webkit-transform-origin: 0.4em 0.6em; -moz-transform-origin: 0.4em 0.6em; -ms-transform-origin: 0.4em 0.6em; transform-origin: 0.4em 0.6em;}details[open] > summary:before { content:"▼"}details > *:not(summary) { display: none; opacity: 0;}details[open] > *:not(summary) { display: block; opacity: 1;}
The polyfill does not preserve the child elements layout when toggeling the details.
Also, there is no guarantee that a browser's native implementation of the <details>
element will
respect it's child elements layout when toggeling the details. To preserve the child elements layout,
you should always wrap the child elements inside a block element, e.g. <div>, <article>, <section>
etc.
Show/Hide me Some content ..... etc.
<details>
polyfill is partly based on/inspired by the following sources:
Credits: The - https://github.com/jordanaustin/Details-Expander
- https://github.com/chemerisuk/better-details-polyfill
- http://codepen.io/stevef/pen/jiCBE
- http://blog.mxstbr.com/2015/06/html-details/
- http://html5doctor.com/the-details-and-summary-elements/
- http://zogovic.com/post/21784525226/simple-html5-details-polyfill
- http://www.sitepoint.com/fixing-the-details-element/
- https://www.smashingmagazine.com/2014/11/complete-polyfill-html5-details-element/
Licence
MIT Licence 2016 © Leif Olsen