## 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});`

### Constraints of the details polyfill

- The polyfill currently only allows other elements as direct children of the details. Simple text is not allowed as direct child of details.
- The details and summary element can be considered as experimental. It is not clear wether and if yes, how a developer can style the summary element. Safari nightly (6) and Chrome 12 are currently the only browsers supporting this element. Note: Please read Bruce Lawson's blog post.
- We currently haven't coded unit tests for this feature

### Links about details and summary

- Interactive elements (W3C)