How to Create Expandable Sections with HTML, CSS & JavaScript

In today's video I'll show you how to create these awesome expandable sections using only HTML, CSS & JavaScript. They feature a smooth animation when opening too, which is an added bonus.
Ionicons:
ionic.io/ionicons
Thank you for the "animating height" solution:
keithjgrant.co...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript

[@AlexCernat]

I think that you can do it with only html + css, using something like details + summary

[@JordanICM]

never knew about this grid templates trick. I was about to do something 10 times more complicated to calculate heights and stuff. This is a lifesaver, thx!

[@luciusstark]

same boat, pal.

[@blokche_dev]

Still clear explanations. Thanks for sharing. But you may consider using a button as a trigger. This is a UI pattern known as disclosure widget.
Be aware that the content panel may contain interactive elements which are still accessible through keyboard navigation.

[@user-qj4rr1rm8i]

Dude. This doesn't need Javascript at all.

[@AlexCernat]

and great idea about transition over grid-template ... I knew it and it's beautiful! solves many problems that could be implemented only with javascript

[@TomasMisura]

this is very useful, I'll use it in my current project. Thanks a lot for this!

[@rayyanabdulwajid7681]

Haven't you made a similar accordion with only html and css?, forget javascript, you can achieve the same functionality with details and summary tag which hardly requires css.

[@softwarelivre2389]

I use checkbox gimnastics to do that. Not recommended tho, but works without JS, so it has its own advantages.

[@suelingsusu1339]

Superb!! 😎👌👏👏🙏🙏🖖🖖🖖🖖🖖

[@seancmptn]

Sick video four eyes

[@OgyXD]

What theme are you using??

[@joel-rg8xm]

Isn't this video a bit too long for quite a simple task that can be implemented with css-only?

[@truthteachers]

Why dont you use jquery-ui and be done with it?

[@huzaifaqayyum786]

13:10 ... thanks me later