Using HTML's details tag

HTML is full of elements that can do quite a lot, the details is a prime example of something that hides and reveals content natively. It's not quite an accordion, but pretty close.

I've put together some examples of what it can do. The first few have no paragraph tags around the content to see what it's able to do with the least amount of code. I've also tried it with, without and with an empty summary tag.

Using the details tag correctly

Well, the content it reveals isn't correct in my opinion, but the element itself is using the right markup and works great:

details tag with no summary

You don't have to specify a summary at all, it will be populated with the word 'Details' by default. In this first example, I've omitted the summary completely. In this case though (thanks to my CSS), the element doesn't render as well but is still usable.

And here it is with an empty summary tag where it treats it displays without a title. The layout if better and it's usable... but a summary really would help here to let you know what it was you are expanding.

More complex examples

This time, I've recreated the 'correct' example from above but wrapped I'm explicitly defining the paragraph of text.

The tag can actually handle other elements too. I've only ever really used it for blocks of text, lists and links but here it is containing a table:

Mixing content in the details tag

My last example contains a paragraph, a table and a list. To me it seems pretty extreme to use it to hide so much content, but if you needed to you could.

Final thoughts

I'd be interested to know what others are using this element as I don't think I've seen it used much around the web. The element itself leaves a lot to be desired in how it looks, but it doesn't take much CSS to fix that up.

I've used it over on SITEJOY, you can see it in the sidebar here where I've hidden the information on how to submit corrections and additional credits for a site.

There are a load more elements that automatically take care of functionality without the need to write any JavaScript and I'll look at exploring a few more of them in the coming weeks.