How To Make Accordion Design Using HTML And CSS Step By Step

Поделиться
HTML-код
  • Опубликовано: 10 дек 2024
  • Learn How To Make Accordion Menu Design Using HTML And CSS Step By Step | Accordions UI design in HTML CSS
    ❤️ SUBSCRIBE: goo.gl/tTFmPb
    In this video we will create an accordion menu design for website. We can use the accordion UI design to display FAQ or question answers on the website. We will design this accordion
    -----------------------------------------
    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
    👉 easytutorialsp...
    -------------------------------------
    Recommended Videos:
    Learn Complete HTML and CSS from basics:
    ► • HTML And CSS Tutorial ...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make fitness website design using HTML CSS:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make a Job Portal website design with HTML & CSS:
    ► • How To Make Website Us...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    Affordable web hosting (coupon- EASYTUTORIALS)
    👉 easytutorialsp...
    My recommended tools and tutorials
    👉 easytutorialsp...
    -------------------------------------
    ◼️ 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:
    ► / @greatstackdev
    -------------------------------------
    Like - Follow & Subscribe us:
    ◼️ RUclips: goo.gl/tTFmPb
    ◼️ Facebook: goo.gl/qv7tEQ
    ◼️ Twitter: / itsavinashkr
    ◼️ Instagram: / iamavinashkr

Комментарии • 98

  • @rameshchoudhary9287
    @rameshchoudhary9287 2 года назад +14

    I made a beautiful website from your tutorials and all animation in one website is just amazing..... The login form, contact form, service section, footer, navbar, and all the necessary section.... So thank you ❤️

  • @bilimlink
    @bilimlink 2 года назад +8

    You deserve a respect for your excellent work 👏

  • @Gabriel-jp5dl
    @Gabriel-jp5dl 2 года назад +3

    bro know that im watching the full ad jesus u saved me

  • @PaksPromise
    @PaksPromise Год назад

    You're one of my favs... thanks alot for saving me so much time

  • @tenu6213
    @tenu6213 Год назад

    Thankyou for this tutorial
    Well explained 😊

  • @Orion-10x
    @Orion-10x 3 месяца назад

    awsome!
    thanks, very straight forward and simple

  • @АртемНікішин
    @АртемНікішин 2 года назад

    It's amazing. My respect to the author!

  • @Applecitylightkiwi
    @Applecitylightkiwi Год назад

    Not bad brother liked the way you broke this down into steps

  • @yungwarlock
    @yungwarlock Год назад

    Boss!!! Made my day

  • @farukweb
    @farukweb 3 месяца назад

    Really Nice accordion

  • @khenjyjohnelson18
    @khenjyjohnelson18 2 года назад

    Great tutorials! I just need to change radio to checkbox and realized that the paragraph could appear more than one at a time.

  • @chandranajith8655
    @chandranajith8655 7 месяцев назад

    Awesome bro🎉

  • @pranupranav5563
    @pranupranav5563 2 месяца назад

    Super❤🎉

  • @Daamilola
    @Daamilola Год назад

    Really simple explanation

  • @maheeshagamage
    @maheeshagamage Год назад

    Awesome thank u so much ❤

  • @dansyz80
    @dansyz80 6 месяцев назад +1

    Thanks 🙏 ❤

    • @GreatStackDev
      @GreatStackDev  6 месяцев назад

      Glad you liked it. Thanks for your comment. 😊

  • @JonnakutiKiranBabuBVCE
    @JonnakutiKiranBabuBVCE Год назад

    Excellent Brother

  • @petermichael3490
    @petermichael3490 2 года назад +1

    you are the best

  • @eliyir
    @eliyir 2 года назад +3

    Awesome! Can you also demonstrate the same accordion feature where the data comes from an API? Thank you.

  • @952a259
    @952a259 Год назад

    Good job, thank you! 💪

  • @gioba4912
    @gioba4912 2 года назад +1

    👍👍
    Amazingly done!

    • @GreatStackDev
      @GreatStackDev  2 года назад

      Thank you! 👍

    • @olu_herodotus
      @olu_herodotus 2 года назад

      @@GreatStackDev Good morning, please I'd like you to upload a tutorial on how to create a classified ads website like OLX using HTML and CSS. All the tutorials I've been seeing on that topic only talks about using WordPress. Please I'll be happy if you can speedily grant this request. Love from Turkey

  • @LuízeCarrilho
    @LuízeCarrilho Год назад

    Good❤👏👏👏

  • @MercurySteel
    @MercurySteel 5 месяцев назад +1

    I have two questions about this:
    1. Is it necessary to give the content an explicit max-height? I tried to give unset the max-height instead only to realize that it cannot transition from the max-height of 0 to unset.
    2. Why do contents only start closing after the checked one finishes opening?

  • @UsaidOk
    @UsaidOk 11 месяцев назад

    its amazing!!

  • @vexu__
    @vexu__ 2 года назад +2

    Hey, I have a question if I can make a page (java / html and others) based on the type r / place (reddit / place). This is a map with pixels where you click and create a pixel with a given color.

  • @nitishkumar4u184
    @nitishkumar4u184 2 года назад

    Thank You So Much Sir g.

  • @olu_herodotus
    @olu_herodotus 2 года назад

    Good morning, please I'd like you to upload a tutorial on how to create a classified ads website like OLX using HTML and CSS. All the tutorials I've been seeing on that topic only talks about using WordPress. Please I'll be happy if you can speedily grant this request. Love from Turkey

  • @kunal007216
    @kunal007216 2 года назад

    Great stuff 🙏🏻

  • @programmingkhata
    @programmingkhata 2 года назад

    Sir, I have learned web design. I want to learn more. What I will do next will be good for my future. Please tell me Sir In between the MEAN stack and MERN stack

  • @samremonte382
    @samremonte382 Год назад

    Amazing!

  • @musiimentaodith4361
    @musiimentaodith4361 Год назад

    Thank you

  • @omorfaruk6986
    @omorfaruk6986 2 года назад

    Brother only html css basic to advanced Please give us a project series please bro

    • @GreatStackDev
      @GreatStackDev  2 года назад +1

      here it is: ruclips.net/p/PLjwm_8O3suyO2gdXdWHKgM-mO2Y251zzU

  • @seeker3794
    @seeker3794 Год назад

    Perfect Video👍... And my question is : is that possible to rotate arrows as well when they are clicked, without use of Javascript?

  • @alexftw356
    @alexftw356 2 года назад

    can you, please, tell me the color pallete you're using ? or make me a print on your color scheme, please, please, it looks so liagible. it gets easy on my eyes. i love it. pleasee tell me

  • @aatifrashid5413
    @aatifrashid5413 2 года назад

    Great video

  • @BigBlueRabbit
    @BigBlueRabbit 5 месяцев назад +1

    Pefect

    • @GreatStackDev
      @GreatStackDev  5 месяцев назад +1

      Glad you liked it. Thanks for your comment. 😊

  • @zakaria756
    @zakaria756 2 года назад

    Can you put in the description the link to the code? Thanks. Great Video!

  • @sandeepjaryal7617
    @sandeepjaryal7617 2 года назад

    Thank you bro

  • @angelcmelgarc
    @angelcmelgarc Год назад

    I have a question: how could you make the accordion extend, upwards instead of downwards. When extended, the label being on the bottom but the content being on top of the label, along with the arrow going upwards too.

  • @mstmursalinakhatun3671
    @mstmursalinakhatun3671 2 года назад

    Thanks vaiya

  • @ariefgunardi4798
    @ariefgunardi4798 Год назад

    Can i change the label color when get checked?

  • @hood_love_189
    @hood_love_189 Год назад

    great job

  • @theeanuragmishra
    @theeanuragmishra 2 года назад +2

    how to only rotate the arrow when radio is checked ?

  • @giovannyalexanderquirozchica
    @giovannyalexanderquirozchica 2 года назад

    Excelente video amigo me sirvió mucho

    • @allmemes3929
      @allmemes3929 2 года назад

      ruclips.net/video/JX09K0QvqmM/видео.html

    • @GreatStackDev
      @GreatStackDev  2 года назад

      glad i could help

    • @allmemes3929
      @allmemes3929 2 года назад

      @@GreatStackDev I need your help. please help me

    • @allmemes3929
      @allmemes3929 2 года назад

      @@GreatStackDev please help me sir

  • @thisishabib744
    @thisishabib744 2 года назад

    I video need / responsive dropdown menu using html css js without css chackbox
    Please reply
    ❣️❣️❣️from Bangladesh

  • @webtamil98
    @webtamil98 2 года назад

    Super bro 👍

  • @kailashbhujel7777
    @kailashbhujel7777 2 года назад

    plz can u post the video of react, node js tutorial

  • @jessecallas
    @jessecallas 2 года назад

    Hello, how can the symbol inside be made to rotate?
    Thanks

    • @jessecallas
      @jessecallas 2 года назад

      Like the symbol rotates 45 degrees by adding transform: rotate(45deg);
      Where and how should that be added?

  • @naukriboard9025
    @naukriboard9025 2 года назад

    Sir, How to add in WordPress
    WordPress ka bhi btado

  • @kimhuo9253
    @kimhuo9253 2 года назад

    what is your font and theme your code color

  • @NotKyleChicago
    @NotKyleChicago Месяц назад

    Why not use and ?

  • @bharatichoudhury3503
    @bharatichoudhury3503 2 года назад

    Anek kichhu janlam

  • @melinanina22
    @melinanina22 2 года назад

    hi bro please can you make tutorials zbt shopify themes developpent. how to crat them. thank you

  • @xarzu
    @xarzu 29 дней назад

    Are you charging for the source code?

  • @muhammadalam9422
    @muhammadalam9422 2 года назад

    How to Change the Icon or Entity on Click?

  • @GyneMed-ck7kg
    @GyneMed-ck7kg Год назад

    how do i add the fourth till the 15th one?

  • @waleedtahir9933
    @waleedtahir9933 2 года назад

    bro it is not going to responsive because we have given height to 400px so when it will be gonna increase in mobile version text will be overflowed what to do for that please help

  • @bnlfans9760
    @bnlfans9760 2 года назад

    Apka selary monthly...??

  • @jhojang.vargasrivera7855
    @jhojang.vargasrivera7855 2 года назад

    my proyect dont work, any help ??

  • @ClydeMoreno-n7h
    @ClydeMoreno-n7h 8 месяцев назад

    how do i hide all of them ?

  • @sharanyyachanda
    @sharanyyachanda 2 года назад

    Can you please share the code

  • @rahm4378
    @rahm4378 Год назад

    but what if i want to close alll

  • @wordpressdesign301
    @wordpressdesign301 2 года назад

    GROUBSEO WEBSITES KAISE BANAYE

  • @sakshamsharma4776
    @sakshamsharma4776 2 года назад +1

    😘

  • @BikramjeetSingh-lv1qw
    @BikramjeetSingh-lv1qw 8 месяцев назад

    share this code plz

  • @kyithinsan9759
    @kyithinsan9759 4 месяца назад

    It doesn't work for me :')

  • @omkarjadhav4107
    @omkarjadhav4107 11 месяцев назад

    source code ?

  • @MelkoR4111
    @MelkoR4111 2 года назад

    bad idea to work with hight

    • @GreatStackDev
      @GreatStackDev  2 года назад +1

      then use display: block and display: none; but there won't be any transition

  • @archi806
    @archi806 Год назад

    аддуши братка если бы не ты я бы никогда в своей жизни эту дичь не сделал, ты меня мативацию паднял, и памог сделать акордэон

  • @syediqbalahmed3176
    @syediqbalahmed3176 2 года назад

    vola ... ocay ...

    • @allmemes3929
      @allmemes3929 2 года назад

      ruclips.net/video/JX09K0QvqmM/видео.html

  • @oulare5573
    @oulare5573 2 года назад

    Like

    • @allmemes3929
      @allmemes3929 2 года назад

      ruclips.net/video/JX09K0QvqmM/видео.html

  • @hemadevil2490
    @hemadevil2490 8 месяцев назад

    Tq so much broo.... It's helpful to me

  • @thisishabib744
    @thisishabib744 2 года назад

    I video need / responsive dropdown menu using html css js without css chackbox
    Please reply
    ❣️❣️❣️from Bangladesh

    • @allmemes3929
      @allmemes3929 2 года назад

      ruclips.net/video/JX09K0QvqmM/видео.html

    • @allmemes3929
      @allmemes3929 2 года назад

      Now you can see this video

    • @allmemes3929
      @allmemes3929 2 года назад

      This is related accordion

  • @thisishabib744
    @thisishabib744 2 года назад

    I video need / responsive dropdown menu using html css js without css chackbox
    Please reply
    ❣️❣️❣️from Bangladesh