HTML5-now: details element

Please note that there is currently a problem with the rendering model for this element so these examples are subject to change.

A details element in the closed state:

Click the arrow to open/close.
This is the content of the element.

This is the markup for the above example:

<details>
 <dt>Click the arrow to open/close.</dt>
 <dd>This is the content of the element.</dd>
</details>

And now a details element in the open state:

Click the arrow to open/close.
This is the content of the element.

This is the markup for the above example:

<details open>
 <dt>Click the arrow to open/close.</dt>
 <dd>This is the content of the element.</dd>
</details>

If the initial dt element is missing then a default legend is created with the text "Details":

This is the content of the element.

This is the markup for the above example:

<details>
 <dd>This is the content of the element.</dd>
</details>