DEV Community

Cover image for Show and Hide Content Easily With details and summary HTML Tags

Show and Hide Content Easily With details and summary HTML Tags

Vitor Paladini on September 30, 2020

Here's a neat little trick: You can use the <details> and <summary> HTML tags to create a simple accordion/collapsible UI. The only...
Collapse
 
gsarig profile image
Giorgos Sarigiannidis • Edited

This is a nice and simple trick which I wanted to further investigate myself too at some point. Mostly, I wanted to investigate 2 basic topics:

  • Is it semantically correct to use it as an FAQ or should the markup be different on such cases?
  • Can you apply CSS animations?

Do you happen to have any good resources on the above?

Collapse
 
vtrpldn profile image
Vitor Paladini

Hey Giorgos, great questions.

Is it semantically correct to use it as an FAQ or should the markup be different on such cases?

I'd say so, yeah! The says W3C spec says that "The rest of the element’s contents represents the additional information or controls."

A FAQ answer seems like additional information in my book.

Can you apply CSS animations?

Hmm... To a degree, but animating display and height is particularly tricky. I've found some examples but none particularly good. I'll give it a try and update the article if I find a way to do it πŸ™‚

Collapse
 
cezaraugusto profile image
Cezar Augusto

Hey @vtrpldn , nice post! Great to know about summary/details, love dynamic HTML elements.

btw is it possible (semantically?) to have the component to display in an "open" state by default? Would be cool! :)

Collapse
 
vtrpldn profile image
Vitor Paladini

Hey, Cezar. Thanks!

Yes, you can add an open attribute to it, like so: <details open> and the details box will start in an opened state

Collapse
 
cezaraugusto profile image
Cezar Augusto

cool, thanks! been learning nice stuff from your posts here on DEV, keep them coming!

Collapse
 
urielbitton profile image
Uriel Bitton

Very nice. I'm curious to know how do you make the action clickable without any JS

Collapse
 
vtrpldn profile image
Vitor Paladini

That's just how <details> + <summary> works. It is quite like how you can make a range slider with <input type="range"> πŸ™‚

Collapse
 
urielbitton profile image
Uriel Bitton

ahh ok nice! thanks man!

Collapse
 
kaisermann profile image
Christian Kaisermann

Your brain is beautiful, sir!

Collapse
 
vtrpldn profile image
Vitor Paladini

Thanks for your support, Chris

You also have a magnificent cranial anatomy 🧠

Collapse
 
amitsheo profile image
Amitsheo

Hi,

This is nice,
I have a query.

I just want to display tag content only when media is less than 600px, but more than that want to disable tag property but content should be displayed. I donot want to "display :none "

Please help me regarding this.

Collapse
 
lakinduk profile image
Lakindu Kariyawasam

what a tutorial !
simple, but elegant trick..
thank you!

Collapse
 
vtrpldn profile image
Vitor Paladini

Glad I could help πŸ˜„

Collapse
 
vtrpldn profile image
Vitor Paladini

Thanks! β˜ƒοΈ

Collapse
 
vtrpldn profile image
Vitor Paladini

Thanks, Felipe! I love finding and sharing these little nuggets of webdev, let me know if you have a suggestion πŸ˜„