This polyfill allows you to use expanding boxes on your webpages.
Use HTML5 tags details and summary
like this:
<summary>Read more</summary>
<details>
<p>
Additional information,
which is in general useful,
but could be usefully hidden.
</p>
</details>
You can style the tag using CSS. Here are the styling hooks with some default styles:
/* WebKit native support*/
details summary::-webkit-details-marker { }
/* Not supporting browsers */
.no-details details { display: block }
.no-details details > summary::before { content:"►" }
.no-details details.open > summary::before {
content:"▼" }
There is also a simple Javascript API:
// My <details> tag (can be a collection)
var el = $('#foo');
// Open the tags
el.details('open');
// Close the tags
el.details('close');
// Get a boolean value if the tag is open
el.details();
// Bind triggers
el.on('open', function(){});
el.on('close', function(){});
// Init polyfill on new elements
el.details('init');
We can also animate details tags.
Simply add a class animated to your <details> tag and that’s it.
Sliding down will be added on both native and polyfilled versions.
To control the animation speed, add data-animation-speed attribute to your <details>
tag. Anything that jQuery slideDown takes works.
Notice, that animation requires a creation of a wrapper to contain all children nodes, so be careful with your CSS children selectors!
This plugin requires jQuery, version at least 1.7.
Take the code (2.8 kb) and connect it to your page.
License: GPL, MIT.
Code: hosted on Bitbucket.
Last version: 1.7, packed on .
Author: Denis Sokolov.
Inspired by work of Mathias Bynens.