- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
From the Rough Cut
From the Rough Cut
From the Rough Cut
Beginner Recipe: Make a Native Toggle Widget with the <details> element
But before we go any further, at the time of writing, no browser supports this new element but it is worth knowing about the details element for when browsers do support it.
The details element creates an interactive open/close toggle effect to be created, without the need for JavaScript and/or CSS. The summary element can be used within details to represent the summary of the content.
details has an optional attribute: open. If this is true it will show the details element open by default, otherwise the details element will be shut, and the summary will be displayed. The summary is the clickable part which will open/close the details.
Despite the lack of browser support we get a good idea of what the details element is going to do.
)
Figure 2.3 The details element with one section open
Figure 2.3 above shows what a brief author bio might look, with the top one open by default. The code for that is below in Listing 2.3.
Listing 2.3
<details open> <summary> Tom Leadbetter</summary> <img alt="Tom and Lucy Leadbetter at the Grand Canyon" src="tomandlucy.jpg" /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details> <details> <summary>Charles Hudson</summary> <img alt="" src="charleshudson.jpg" /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </details>
Another example is using the details element to show/hide a table of contents. Depending on the styling of the page, and the amount of content, it could be useful to have the table of contents always in the top corner and the user can click to expand it and navigate to a different section of the page. Listing 2.4 has the code for this, with the details element closed by default.
Listing 2.4
<article> <h1>A massive document with lots of juicy content</h1> <details> <summary>Table of contents<summary> <nav> <ul> <li><a href=#chapter1>Chapter 1</a></li> <li><a href=#chapter2>Chapter 2</a></li> </ul> </nav> </details> <section> <h1 id="chapter1">Chapter 1</h1> </section> <section> <h1 id="chapter2">Chapter 2</h1> </section> .... </article>