Using HTML's details tag

Week 173 was posted by Charanjit Chana on 2021-02-15.

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:

The Summary Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula auctor, hendrerit metus non, dapibus enim. In suscipit quam at urna elementum, eget accumsan purus pretium.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula auctor, hendrerit metus non, dapibus enim. In suscipit quam at urna elementum, eget accumsan purus pretium.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula auctor, hendrerit metus non, dapibus enim. In suscipit quam at urna elementum, eget accumsan purus pretium.

More complex examples

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

The Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula auctor, hendrerit metus non, dapibus enim. In suscipit quam at urna elementum, eget accumsan purus pretium.

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:

The Summary
# Title
Week 1 The 100-megapixel Moon
Week 2 Stranger Things 2

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.

The Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula auctor, hendrerit metus non, dapibus enim. In suscipit quam at urna elementum, eget accumsan purus pretium.

# Title
Week 1 The 100-megapixel Moon
Week 2 Stranger Things 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ligula auctor, hendrerit metus non, dapibus enim. In suscipit quam at urna elementum, eget accumsan purus pretium.

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.


Tags: development, html, development, html


Tweet WhatsApp Keep Upvote Digg Tumblr Pin Blogger LinkedIn Skype LiveJournal Like