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

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 ม.ค. 2025

ความคิดเห็น • 76

  • @eric-8998
    @eric-8998 8 หลายเดือนก่อน +3

    Thanks!

  • @РишаРозенберг
    @РишаРозенберг ปีที่แล้ว +2

    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!!!!

  • @adrielsoren2904
    @adrielsoren2904 ปีที่แล้ว +1

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

  • @tuurks1
    @tuurks1 4 หลายเดือนก่อน +2

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

  • @David-th5nx
    @David-th5nx 2 ปีที่แล้ว +4

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

    • @GreatStackDev
      @GreatStackDev  2 ปีที่แล้ว +4

      Great to hear!

    • @danielekpenyong5930
      @danielekpenyong5930 7 หลายเดือนก่อน

      This stuff didn't work for me don't know if it's just me

  • @quantyquanty3724
    @quantyquanty3724 2 ปีที่แล้ว +2

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

  • @expendable0youth
    @expendable0youth ปีที่แล้ว

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

  • @luciusstark
    @luciusstark 5 หลายเดือนก่อน

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

  • @MovieHeretic
    @MovieHeretic 2 หลายเดือนก่อน

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

  • @sabirrao3229
    @sabirrao3229 ปีที่แล้ว

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

  • @RebrandSoon0000
    @RebrandSoon0000 3 หลายเดือนก่อน

    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.

  • @Gamer_Guy2.0
    @Gamer_Guy2.0 11 หลายเดือนก่อน

    This video was really helpful, Keep it up Avinash

  • @iCeTainment
    @iCeTainment 2 ปีที่แล้ว +4

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

  • @osoningliztili6708
    @osoningliztili6708 2 ปีที่แล้ว +1

    thank you, simple, clear and beautiful

  • @84Joooli
    @84Joooli ปีที่แล้ว

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

  • @ayomideabiola3176
    @ayomideabiola3176 2 ปีที่แล้ว

    You're very good and creative❤✅

  • @blahimmelen7920
    @blahimmelen7920 ปีที่แล้ว +3

    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?

    • @Camassati
      @Camassati 10 หลายเดือนก่อน +5

      Hey man, just change the type of input, change radio for checkbox

  • @bedtimehorrorstoryyoutube
    @bedtimehorrorstoryyoutube ปีที่แล้ว

    Flawless as always! Thank you!!

  • @dominicbucci5676
    @dominicbucci5676 9 หลายเดือนก่อน +1

    Helpful video. Is this accessible?

  • @-pt7oy
    @-pt7oy 2 ปีที่แล้ว

    Ima download it thanks for sharing!!

  • @mohitsaini6932
    @mohitsaini6932 2 ปีที่แล้ว +1

    Very helpful video

  • @dewwinsemuthu9040
    @dewwinsemuthu9040 2 ปีที่แล้ว

    Wow! Very wonderful

  • @bdmizan360
    @bdmizan360 2 ปีที่แล้ว

    grateful boss.❤️

  • @RuhulAmin-pm3ox
    @RuhulAmin-pm3ox 2 ปีที่แล้ว

    wow , superb 🤩

  • @ismailmuyideen4873
    @ismailmuyideen4873 ปีที่แล้ว

    great content man!

  • @sugiwasirimewan6923
    @sugiwasirimewan6923 3 หลายเดือนก่อน

    TnQ so much brother

  • @mohitsaini6932
    @mohitsaini6932 2 ปีที่แล้ว +2

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

  • @coders-rabbi
    @coders-rabbi ปีที่แล้ว

    very helpful

  • @grasshopperweb
    @grasshopperweb 25 วันที่ผ่านมา

    I'm hesitant about the accessibility of using a radio selector like this. Would this not also prevent me from putting links inside of my collapsing cards that keyboard navigation could also reach?

  • @knb8449
    @knb8449 2 ปีที่แล้ว

    Super guru...👍

  • @elementorextra6700
    @elementorextra6700 2 ปีที่แล้ว

    Nice work brother

  • @dongbui881
    @dongbui881 ปีที่แล้ว

    Thank you Sir.

  • @umeshkale858
    @umeshkale858 9 หลายเดือนก่อน

    THANKS A LOT.

  • @prayervaluablesupport6118
    @prayervaluablesupport6118 10 หลายเดือนก่อน

    Where are the tags?

  • @sureshjotham
    @sureshjotham 2 ปีที่แล้ว

    Very Nice .

  • @zhetechhub
    @zhetechhub ปีที่แล้ว +1

    Great video. Thanks for posting. After you have clicked on it the + sign and the content has been expanded, and it's now showing the minus sign, how can you make the minus(-) sign, hide the content whenever it is clicked.

    • @Hannblumen
      @Hannblumen ปีที่แล้ว +1

      Switch the input="radio" to input="checkbox" in the html. In the CSS change the radio to checkbox also.

  • @agamemnon-Fr
    @agamemnon-Fr 2 หลายเดือนก่อน

    Thanks ;)

  • @mercee4097
    @mercee4097 2 ปีที่แล้ว +2

    Please easy tutorial make an authentication website using serial numbers or barcode

  • @MelkoR4111
    @MelkoR4111 2 ปีที่แล้ว

    If you do it with Chrome you 'll probably get tabs shaking while they are changing, however, i checked other browsers and all is fine. Any ideas how to fix it in chrome? all in all, great stuff

  • @atreyemukherjee8233
    @atreyemukherjee8233 9 หลายเดือนก่อน

    Great video, thanks for the tutorial. I dont want to close the product when i open information, how do we do it?

  • @abdulahadgazi9307
    @abdulahadgazi9307 2 ปีที่แล้ว

    Nice

  • @directornovela7774
    @directornovela7774 2 ปีที่แล้ว

    Thanks a lot man

  • @sahilbisht3661
    @sahilbisht3661 10 หลายเดือนก่อน

    Hey nice video.....only part i didn't understand is checked+ label+ .content
    This piece of code is using to expand only the checked field but how ? And why we are doing label+. content can you explain

  • @danielpbianchi
    @danielpbianchi ปีที่แล้ว +2

    Hey buddy, thanks a lot. Super cool tutorial. In my test, I changed the RADIO to CHECKBOX. Because I needed click on and click off. Do you know what I mean? Again, thank you sou much.

    • @Hannblumen
      @Hannblumen ปีที่แล้ว

      @ziggychuks5065 that change works.

  • @jobienify
    @jobienify 11 หลายเดือนก่อน

    How have you made the label respond to clicks when its display is hidden ?

  • @zainmahedi7954
    @zainmahedi7954 ปีที่แล้ว +2

    responsive version?

  • @gideondaniels2621
    @gideondaniels2621 ปีที่แล้ว

    How do you close the accordion that is open without clicking on a diffrent accordion ?

  • @CamillaDriley
    @CamillaDriley 10 หลายเดือนก่อน

    What if I need to add an arrow visible at the end of the first input

  • @matheshwaran9465
    @matheshwaran9465 ปีที่แล้ว

    Can i use the same code in my reactjs project?

  • @guandeng1231
    @guandeng1231 ปีที่แล้ว

    is this mobile friendly?

  • @danielekpenyong5930
    @danielekpenyong5930 7 หลายเดือนก่อน

    Sir, please review this video because once the check is hidden it's no more collapsible

  • @imapimplykindapimp
    @imapimplykindapimp ปีที่แล้ว

    champion

  • @SMOKEY43999
    @SMOKEY43999 2 ปีที่แล้ว

  • @okyes8343
    @okyes8343 9 หลายเดือนก่อน

    thankyou

  • @ChandujobsApplications
    @ChandujobsApplications 25 วันที่ผ่านมา

    when display none how will the input get checked over there

  • @Themhofficial007
    @Themhofficial007 ปีที่แล้ว

    Sir Please, I want make in blog with full details history like this code, help me and also want page no. In bottom, my site like history site so i really like this code help me

  • @thekmmaster4149
    @thekmmaster4149 5 หลายเดือนก่อน

    I copied the whole code except for the text
    But for whatever reason I don't know the + symbol isn't appearing on the webpage

  • @nepalisportsinfo
    @nepalisportsinfo 2 ปีที่แล้ว

    How to make cricket score sheet by coding?

  • @xarzu
    @xarzu หลายเดือนก่อน

    Are you charging for the source code?

  • @thekiterunner7082
    @thekiterunner7082 2 ปีที่แล้ว

    Please do corona viruses tracking project!!

  • @deepikakumaricse7416
    @deepikakumaricse7416 ปีที่แล้ว

    My accordian is not working

  • @sanchaysingh6513
    @sanchaysingh6513 6 หลายเดือนก่อน

    How to close it also right that

  • @thwishatkotian9752
    @thwishatkotian9752 ปีที่แล้ว

    How to make this responsive?

  • @techedandchill
    @techedandchill ปีที่แล้ว

    ke a leboha 🙏

  • @ankitkumar-hx6gq
    @ankitkumar-hx6gq หลายเดือนก่อน

    its not working

  • @ankitkumar-hx6gq
    @ankitkumar-hx6gq หลายเดือนก่อน

    😕😕😕

  • @abhishekpandit2775
    @abhishekpandit2775 2 ปีที่แล้ว +1

    js is missing!!

  • @mcfrothy_
    @mcfrothy_ ปีที่แล้ว

    Awesome, thanks you for this information. How to add this accordion to your footer menu in mobile view. I hope u can make video for this, I’ll definitely keep on eye on it🫰