Responsive FAQ accordion dropdown | HTML and CSS Tutorial

In this video we will be taking a look at how we can create a responsive FAQ accordion using the power of HTML and CSS. Accordions are a flexible component that can be used for many things when you wish to hide content and then show it based on an event.

Don't forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

[ SOCIAL MEDIA ]

[ HOSTGATOR ]

Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.

Coupon code ► JULIOCODES60

[ MY GEAR ]

Programming/Video editing laptop Specs & extras

Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
--- Extras ---
Monitor: Dell Ultrasharp 27"
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti

[ DISCLAIMER No. 1 ]

In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.

[ DISCLAIMER No. 2 ]

This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!

[NicoHeinrich]

I was anxious that I couldn't do a responsive AND animated accordion with css only and this video is exactly what I needed! Thank you sir!

[fredoscott]

This video is a perfect example of what Youtube tutorials should be like. Like someone said in the comments..."...looks like a paid course on Udemy". Besides, most Udemy courses isn't even near this in quality. I salute you, Julio :)

[frujunior]

This is my first time seeing a tutorial on YouTube which looks like a paid course on udemy, thanks man love the way you explain in details, anyone can understand it with ease.
Once again thanks man and I'm here to stay on this channel. One subscribe added and will share to friends just hope you keep it up .

[charlestm]

You are the best. Through your tutorials, I've learned over 60% of all the CSS I know. Thank you.

[praveenrai]

Bro you are true savior, the code was clean and easy to i really appreciate it.

[shahzaibawan]

Thank you so mush for the concept of the accordion add and remove icon.
You just made my work easier for me. I'm applying that concept to open forms.

[eduardodourado]

Great tutorial man, thank you very much! One question, how do I get the same answer box to close when I click on it? Because we can transition between them but the same one that's opened won't close again. Many thanks!!

[rammagadheeran]

Oh man, it's really working, true youtuber guys !

[everythingfromzero]

thanks a lot man, love you pls dont ever delete this video

[georgetester]

Thanks very much for the clear tutorial bro

[unbxed]

Hi nice tutorial, but I have a question when you place more then one accordion on one page how comes that the actions off the one who stands open is affected when you click in the second one. For example: accordion 1 has his selection open and I would like that accordion 2 has also his selected option open? How do you do that?

[TheDuerden]

That was really good, I knew nothing about CSS - but I learnt a lot from implementing this thanks for the Video.

[davebudah]

When I first saw this video months back I said "well I will be back", now I'm back coz I need it.

[bower]

wow beautiful man, that's amazing, thanks for the video :D

[successsoi]

Awesome video bruh. This helped me with a project. Appreciations man

[ashiqurrahman]

Thank you so much brother .This is actually what I am looking for.

[fernandoherrera]

Amazing Julio, is it possible to add a search box that brings that filters the questions?

[caiosilva]

Make more videos like this, keep this frequency

[LuisReyes-zsuk]

great video!
is there anyway to make the "open" animation of currently selected and "close" animation of previously selected be simultaneous? thanks!

[syedjameelakhter]

Thank you very much it's very helpful for me awesome explanation 👍