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.
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.
Tags: development, html, development, html