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.