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.3 kb) and connect it to your page.
License: GPL, MIT.
Code: hosted on Bitbucket.
Last version: 1.5, packed on .
Author: Denis Sokolov.
Inspired by work of Mathias Bynens.