How To Make An Accordion Using HTML And CSS | Collapsible Content On Website

Learn How To Make An Accordion Using HTML And CSS Step by step | Collapsible Content on website In HTML & CSS
#htmlandcss #csstutorial #website

In this video we are going to make a Collapsibles / Accordion in neumorphism style. In this Accordion we will not use any JavaScript, there will be only HTML and CSS. When the Accordion is open you will see a (-) icon here and once it is close you will see a (+) icon. By default the fist accordion is open, when we will open another accordion to see their content, then the other accordion will get closed. Be will make this beautiful neumorphism design accordion using HTML and CSS, without any JavaScript.

-----------------------------------------
Suggested Course:

❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate

-------------------------------------
Recommended Videos:

Learn Complete HTML and CSS from basics:

Make A Complete Website for college using HTML & CSS:

How to make a Business website step by step:

How to make personal resume website step by step:

How to make fitness website design using HTML CSS:

How to make an Ecommerce Website Design:

How to make a Job Portal website design with HTML & CSS:

How to make travel website design with HTML CSS Bootstrap:

-------------------------------------

Affordable web hosting (coupon- EASYTUTORIALS)

My recommended tools and tutorials

-------------------------------------

◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:

-------------------------------------
Like - Follow & Subscribe us:

[tuurks]

my homework was to do accordion using javascript but this will shock my teacher lol thanks

[РишаРозенберг]

From Russia with Love!! Thanks. I watched a lot of videos in my native language: and everything was difficult there. The most understandable way was in English. Thank you!!!!

[adrielsoren]

Hi, I've watched many tutorials in Spanish that is my mother tongue. But you with your English style, still surpass by far what others have taught me, Congratulations.
!You have a new follower more.¡

[RebrandSoon]

Subbed, this was a life saver!!

You also could make each section just collapsible by changing the input type to checkbox and can even move the + / - to the right using label::after instead of label::before.

Great learning for sure.

[expendableyouth]

i am new to coding and have just learnt a lot watching this thank you

[quantyquanty]

Yeah! your projects are getting more and more interesting. I thought you lost your steam. Thanks much for these videos.

[luciusstark]

Solid call! I tweaked it to use checkboxes and set up an async handler so that `content.remove()` fires when a checkbox is unchecked.

[David-thnx]

I followed through and it worked perfect.. Great to see how much can done with just html and Css

[JoshLerie]

Thank you so much! You helped me a lot!

[MovieHeretic]

Excellent stuff. Had to muck around with the css to implement in a complex site but working exactly as required.

[iCeTainment]

Wow! Very wonderful
I’m definitely going to add it to my project now ❤

[sabirrao]

i love you yar ap na meri problam solve kr di thank you ver much ☺

[osoningliztili]

thank you, simple, clear and beautiful

[Joooli]

Thanks alot. Very Pedagogical and structured tutorial. I knew there had to be a way without js :D

[mohitsaini]

Hii sir ek video radio btn ke saath bhi bnao btn ke saath radio btn ke value bhi change ho aur check ho

[blahimmelen]

First of all, thank you very much. It was great. I just have one question. I cannot close all the acoordion menus at the same time. At least one of them remains open. How do I turn off them all?

[lucianminea]

Nice job, but you have a major disadvantage: fixed height doesn't work anymore. One can't know the height of the content.