August 10, 2011

Keep an eye out for these HTML5 elements

The HTML5 <details> and <summary> elements look to solve a common problem and reduce the need for JavaScript. Check out this article: http://html5doctor.com/the-details-and-summary-elements/ (currently only works with Chrome.)

Basically, you can create a box that you can open and close by clicking the <summary> tag:

<details closed>
<summary>Show/Hide me</summary>
<p>Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

And here’s the DEMO (works in Chrome only for now):

Show/Hide me

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.