Search This Blog

Saturday, January 21, 2012

HTML5 - Details

The aim of the element is to provide native support for a feature common on the Web—a collapsible box that has a title, and more info or functionality hidden away.

The HTML5 details element can be used to expand the relevant addional information and hide the content when needed. <details> element is accompanied with optional <summary> element. <details> is the wrapper for all the content we want to show and hide, and <summary> contains the summary and title of the section.

Currently, this feature only available on Chrome.

<details>

<summary>My Summary</summary>

<UL>
<LI>Content 1</LI>
<LI>Content 2</LI>
<LI>Content 3</LI>
</UL>

</details>

No comments:

Post a Comment