1 Thing A Week 1 Thing
A Week

Using HTML's details tag

Week 173.0 — 15th February '21

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.

  • First item
  • Second item
  • Third item
  • Fourth item
  • Fifth item

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.

More from 1 Thing A Week
« How to build a pure CSS accordion Features that all cars should have as standard Why Apple need to bring lux level support to HomeKit »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 173.5 – Friday
    1. "Mortal Kombat" red band trailer (2021) IGN on youtube.com

Jump to notable items for Week #172, Week #174 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit