Demo/About/Documentation HTML5 details & summary
The HTML5 details element is an interactive element. If the open attribute is set the details are shown, if not the details are hidden.
click to toggle visibility
Here are the details of this element:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore mag
Dynamically creating a details element (always use htmlPolyfill, afterPolyfill, beforePolyfill etc.):
$('details:first').afterPolyfill('<details open="open"><p>Here is some text</p></details>');
The openness of a details element can be also scripted. Simply change the open IDL-attribute:
// set the open attribute of the first details element ...
// ... to its opposite value
$('details:first').prop('open', !$('details').prop('open') );
Options for the details feature
- text (string):
"Details"(default) The summary text, which is generated, if no summary element is found as first child of the details element. - animate (boolean);
false(default): If set to true, the visibility toggle of details will be animated.
$.webshims.setOptions('details', {animate: true});