html

Oct 31, 2013 ∞

Details and summary tags in HTML5

HTML5 includes two tags, details and summary, that can be used to generate expanding menus you once needed JavaScript or jQuery for.

A code snippet opening and closing with the “details” tag can include a summary that, when clicked, expands to reveal additional HTML.

As of this writing, I’ve implemented it in this site’s header, but I’ve also included a working example below, which won’t work in the Tumblr Dashboard.

All you’ll see is the summary line: “Click here to expand this example.”

So this link opens this post in a new tab. Problem solved.

Now, here’s the example:

Click here to expand this example.

Here is a paragraph. Links work, as well. This one goes to my home page.

Learn some more about this simple and elegant way of making web pages more dynamic for HTML5-compliant browsers at W3Schools and Hongkiat.com.