How to Create an Animated Accordion/Collapsible Content - HTML, CSS & JavaScript - Website Tutorial

In this video I'll be showing you how to create an animated Accordion (or Collapsible Content) using plain HTML, CSS and JavaScript - no libraries are required!

I'll be showing you two ways to do this, the first way will be animated and the second will be non-animated, which is a more robust solution in my opinion.

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[georgeriley]

When people do this kind of video it would be VERY helpful to include the code in the description.

[jakeo]

Even before I finished watching this video I changed the logic to "display: none/block" and it all worked perfectly. This was a very helpful video. Thank you.

[alexmachines]

Dude, this is the fifth accordion video I've seen in the last two days. Everyone is so messy to explain things, or take too long or go in too deep on the JS. I've seen one that used like a billion javascript lines and methods.

And now, thanks to you, I've finally got it. Thank you so much, man. You pulled me out of a hole lol.

Subbed.

[garretgggabriel]

I'd not seen that pseudo class before. 4:15. Super rudimentary, but I was pulling my hair out for half a second. Thank you.

[mailenschipper]

Sos lo más! Ya perdí la cuenta de cuántos videos y explicaciones vi... me salvaste! Nueva suscriptora sin dudas

[TomasMisura]

thanks again nam. I don't use accordion very often but this is very helpful.

[snow]

Thank you so much for the explanation while you code. I really want to learn the think process of other programmer. Super helpful video!!

[alexandra]

Brilliant and simple. This makes a great coding exercise. Thanks a lot.

[aurelio]

thank you so much, i had tried to to this many times with other videos but finally this is the one that works.

[riaznapa]

Great video, thanks for showing both versions, the next one makes more sense for me as I am learning JavaScript.

[АндрійГрушецький-ът]

max-height is really genious. It works smoothely and responsively

[ahreg]

solved a big problem for me. thanks very much

[amirsaad]

thank you :) hope to see more and more.

[seemycurls]

Thank you so much! You're a great teacher...you make learning how to code so much fun and easy! Great job!

[thalyssonleite]

I still didn't get the use of overflow: auto. But thank you! That helps me a lot!

[envyza]

Excellent tutorial sir

But I have a question,
does this works on multiple accordions?
it would be helpful if this worked on multiple accordions, because currently i have a project using multiple accordions..

Thanks for advice

[paleolithix]

Hello! This video really helped me out. But how do I add two of these accordions on a website? I've tried to duplicate the code but it doesn't seem to be working. Thanks!

[robertowagner]

Great tutorial. Thank you very much, I subscribed to the channel and shared your content.

[hasibulhossain]

overflow hidden solution with first method when you resize the window. we can use resize event, that fires everytime when we resize the window and then we update maxHeight according to crrent max height. code =>
window.addEventListener('resize', () => {
if(accordion__button--active) =
});

//sorry for my english
//hope this will help you

[khaledmohsen]

i have a question why u get the accordion__button by Query selector all not query selector, it a just one button