Here's a neat little trick:
You can use the <details> and <summary> HTML tags to create a simple accordion/collapsible UI.
The only...
For further actions, you may consider blocking this person and/or reporting abuse
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:
Do you happen to have any good resources on the above?
Hey Giorgos, great questions.
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.
Hmm... To a degree, but animating
displayandheightis 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 🙂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! :)
Hey, Cezar. Thanks!
Yes, you can add an
openattribute to it, like so:<details open>and the details box will start in an opened statecool, thanks! been learning nice stuff from your posts here on DEV, keep them coming!
Very nice. I'm curious to know how do you make the action clickable without any JS
That's just how
<details>+<summary>works. It is quite like how you can make a range slider with<input type="range">🙂ahh ok nice! thanks man!
Your brain is beautiful, sir!
Thanks for your support, Chris
You also have a magnificent cranial anatomy 🧠
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.
what a tutorial !
simple, but elegant trick..
thank you!
Glad I could help 😄
Thanks! ☃️
Thanks, Felipe! I love finding and sharing these little nuggets of webdev, let me know if you have a suggestion 😄