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: – with enough funding I plan to develop a website of some sort with a new developer experience!

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!

By admin

23 thoughts on “How to create an animated Accordion/Collapsible Content – HTML, CSS & JavaScript – Website Tutorial”
  1. Anybody know how to add multiple accordions like this? I tried to copy the code again and change the heading/paragraph copy, but it will only do the accordion affect on that one, not both. If someone could let me know what I need to amend in the code that would be fantastic!

  2. 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.

  3. Thank you very much, good tutorial. Do you have a solution for nested accordions? At work, we are trying to implement an animated accordion inside another accordion.

Leave a Reply

Your email address will not be published.