Accordion (HTML, CSS and JavaScript)

Learn how to create an Accordion, which is a component that organizes content within collapsible items, with HTML, CSS and JavaScript.

Accordions, allow the user to toggle between hiding and showing blocks of content with a single click, thus greatly enhancing the User Experience (UX) of your project.

In our specific example, we are using the Accordion for the Frequently Asked Questions (FAQ) part of our web page. So, the visible part of the Accordion is the question and the hidden (or collapsible) part is the answer.

As usual, we are implementing this component from scratch, with HTML, CSS and Vanilla JavaScript as an alternative to using some third-party library or framework for this purpose.

Enjoy 🙂

Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comments section below!

Support the Channel 💙☕🙏

Suggested Videos:

Subscribe 💖

[unpluggedaman]

That smooth transition on the max-height property instead of using display none/block was amazing. Thanks a lot

[adziak]

Thanks to your video this seems to be very easy to do. Clear explanation, fast and straight to the point plus extra tips presented. Very cool!

[kareynjeri]

i just found the best teacher on the internet !! explaining so smooth like to 5 year old ! and its free man God bless you ! make more content

[ismasyafitri]

Thank you kindly for the code! It helps me a lot :D

[bruhtrippin]

One of the best FAQ Accordion tutorials on YouTube! Thank you!

[eduardoevaristoa]

Thank you so much for the details, dude. Your explanations of certain ins and outs such as what exactly scrollHeight does in the code were crystal-clear!

[rwandalivecoding]

Thanks brother. After a long time coding I got one amzing hint from your works. Thanks a lot it took me 4 year to get to this one hint.

[ferozalimeghani]

Awesome example. Very useful explanations at every coding step.

[PatrykKarwowski-wwij]

You explaind it very well and also gave alternative ways of doing this. Ive found this only on your channel. Best job! Thank you😊

[psjtm]

Totally loved it. Thank you so much for giving many ideas in the process. Efficient and effective way, Sir!

[reisezone]

meeen i have been searching for the teaching like this for almost 2 days i can to find now, this video is very clear directly informative

[juststefan]

Great code, thank you for sharing this!

[sheebakerubo]

thank you for this video, You made every step easy to follow and even easier to understand:)

[lookintomyeyes]

wow, I just learned a lot from this one video, css entities, border images, and accordion itself, thq for explaining everything in detail, its soo helpful, subbed

[philliponcarbs]

Thank you so much for explaining your work. I really like how you provided a quick glimpse of the alternative ways of doing one thing. I think if you found a way to do that more often, you might be standing out from the other webdev tutorial channels. Thats just a thought I had. It really helps me to know that there are other ways to accomplish one thing. even if it does add more explanation and editing time. I certainly appreciate it even if others do not. If you're not already, I can see you being on udemy in no time. Oh and I dunno if this works for you, but for me, I find that ident-rainbow for vscode helps me keep track of the div layers. Anyway thanks again!

[neowisetv]

so far this is the most detailed tutorial i have ever seen. Thank you so much i have learn a lot from this tutorial. please make some more informative step by step tutorial videos.

[carlosraxon]

You did everything i wanted, im really thankfull, one of the best at frontend

[Alberto_Sterling_Fit]

Simple functions and clean code, perfect for beginners.

[stiviniii]

The best video, this was what I was looking for 10/10. At first, I hesitated on but after watching half of it I knew this was the video I was looking for Thank you :)

[bambindien]

1000x thank u from germany – really a high-end tutorial!