How to Create Tabs with only HTML & CSS

Поделиться
HTML-код
  • Опубликовано: 13 янв 2025

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

  • @astigmatik
    @astigmatik 3 года назад +6

    I logged in just to like this video. In fact, I let the ads play to show my gratitude :-) By far, this is the cleanest solution that I have found. No annoying "position: absolute/relative" that would screw up everything when you merge it with your own CSS. I just added some border-radius to the top right and top left of the tab labels and they look even better. Thank you again!

    • @ieatwebsites
      @ieatwebsites  3 года назад +1

      That’s amazing. Thank you so much for that! 😁👍

  • @sunnyshen5
    @sunnyshen5 Год назад +2

    Thanks man. You saved me.
    I got the job saying I know JS, but I don't.
    I am learning JS but it takes time. for now you saved me.

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

    Just Awesome.Before Watching this i know that it can be make by Js.But now i can make it just using Html css.Thanks Bro.

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

    Brilliant tutorial, one of the best ive seen

  • @perfectkanpeki
    @perfectkanpeki 3 года назад +12

    This deserves way more views, thanks for the tutorial

  • @GunzzYT
    @GunzzYT 4 года назад +8

    thank you finally a good tutorial with explanation and no stupid background music ;)

    • @ieatwebsites
      @ieatwebsites  4 года назад +1

      Thank you! 😁 and you welcome

  • @zakidz6716
    @zakidz6716 3 года назад +1

    After seeing this, i can't leave the video without a like and subscribe .
    simple tutorial with cool css tricks in a short time, this is great .

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

    Thank you so much for this tutorial! I appreciate how the steps were laid down explicitly, making sure the reason behind each code was explained. 🙏 Thanks man!

  • @marionseychelles7963
    @marionseychelles7963 3 года назад +1

    It's a great video to learn quickly and easily how to create an accordion tab. If I could put a thousand likes
    I would have done it !!

  • @therealrajan
    @therealrajan 3 года назад +1

    After nothing else worked this saved me thankyou so much.

    • @ieatwebsites
      @ieatwebsites  3 года назад +1

      I’m glad to hear that! You welcome.

  • @weymouthdave
    @weymouthdave 9 месяцев назад

    Excellent tutorial, you explain this concept in a very easy to understand way. Well Done!

  • @dereinzigbeste9042
    @dereinzigbeste9042 3 года назад +3

    Such a good video! You explained it the best way possible and its so much better than other Descriptions

  • @sushmapuli1233
    @sushmapuli1233 3 года назад +1

    Your explanation is clear and learnt a lot

  • @TomaNeagu
    @TomaNeagu 3 года назад +1

    You just earned a subscriber, it ain't much, but it's honest work xD! Keep up the good work, chief!

    • @ieatwebsites
      @ieatwebsites  3 года назад +1

      That’s a lot! Thank you 😁

  • @kwmcgreal
    @kwmcgreal 3 года назад +1

    Very Clever. Just add a pointer on hover to the label and it is golden.

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

    Amazing tutorial, all others use javascript and some don't even work. Thanks a lot!

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

    Thanks Man! This is so very helpful for my capstone project

  • @MeilleureVie2024
    @MeilleureVie2024 7 месяцев назад +1

    This is exactly what I needed, thanks a lot 🙂

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

    An awesome video! Thanks for explaining the concepts that make the code work the way it does. Not many tutors take the time to do that. Thanks a bunch!🙏🏼

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

    Very clear explanation. Thanks for such a great video!

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

    Excellent One. Thanks for uploading.

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

    This is an excellent video! Exactly what I needed! I will include in the notes on my dissertation.

  • @popinstock
    @popinstock Год назад +1

    Fantastic video. So simple and well explained.

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

    I just want to say thank you so much, I love the order trick, will definitely use it on my projects. once again thanks so much!

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

    thank you for this video, this solution is so clean and simple, AMAZIIIING!!

  • @bhushana8463
    @bhushana8463 4 года назад +1

    Very cool step by step narration. Thanks you very much

  • @shaeleamuir2295
    @shaeleamuir2295 Год назад +1

    Extremely easy to follow! Thank you!

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

    Beautiful. I just used it in one of my projects! thanks a lot!

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

    It's such an easy trick, works great. Love it!

  • @emir.siriner
    @emir.siriner 4 года назад +1

    Amazing. Very nice. Thanks for share.

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

    Thanks for the clear tutorial😃

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

    Very elegant! Now to make them responsive!

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

    I hope the reason this video isn't popular is about people already knowing it or people that don't want to know it

  • @davitgogidze4310
    @davitgogidze4310 4 года назад +2

    Interesting and important content 👌

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

    Thanks, this is very important video.

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

    Thank you!!!!! Amazing video!! You saved a life!

  • @طيورالحرية-ي8ظ
    @طيورالحرية-ي8ظ 2 года назад +1

    pretty coool and amazing explanation, thanks!

  • @josephfatoye6293
    @josephfatoye6293 4 года назад +2

    This is very cool, its just what I need in my present project. Thank you very much, looking forward to more amazing contents :)

    • @ieatwebsites
      @ieatwebsites  4 года назад +1

      That’s great! You welcome. 😁

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

    that was amazing young boy! ✌✌✌

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

    Just a perfect video tutorial!!

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

    this is golden! Thanks for sharing this to us!

  • @dharmendrasingh-oz2uz
    @dharmendrasingh-oz2uz Год назад +1

    I make fourth tab, but it is not working why?

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

    Any way to make the tabs size different and place then in the middle instead of left?

  • @yousafzaman8118
    @yousafzaman8118 3 года назад +1

    This video was very useful to me. Thank you!

  • @MirkoMancini
    @MirkoMancini 3 года назад

    Really thanks for this tut, I need to create same project that change background color at any tab, thanks again

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

    I million dollar questions: 1) would it be possible to make the text scrolling underneath the tabs like a sticky header? 2) Is it possible to make the the tabs bar as top header (sticky) once you scrool the page down to the tabs? Hope it is clear. Cheers Valter

  • @besttosan
    @besttosan 3 года назад +1

    Wow! This is great and helpful.

  • @deetorz
    @deetorz 3 года назад +1

    This was amazing and helped so much. Super easy to understand too. Thank you! subbeddddddd

    • @ieatwebsites
      @ieatwebsites  3 года назад

      You are very welcome! Thanks! 😁

  • @helloplz590
    @helloplz590 Год назад +1

    very good its really working, thankyou!

  • @pyrageisold
    @pyrageisold 3 года назад

    how would I allow a tab to have more tabs inside of it?

  • @rangabharath4253
    @rangabharath4253 4 года назад +1

    Awesome as always 👍😀

  • @marcellyrangel5419
    @marcellyrangel5419 3 года назад

    Is there a way to put subtabs inside the tabs? for exemple, inside the "free" tab content, putting 2 more tabs.

  • @reester1341
    @reester1341 3 года назад +1

    Simple and easy tutorial thank you very much :)

  • @angellongalong5211
    @angellongalong5211 3 года назад +1

    Thank you!!!!! This tutorial is a big help!!

  •  2 года назад

    Is it ADA compliant? How is it supported to people who uses screen readers?

  • @halabarid361
    @halabarid361 3 года назад

    when i do display: none in .may tabs .tab , what's in tab disappear and nothing appears when I click it on label.

  • @Prokudak
    @Prokudak 3 года назад

    This is a clever a solution: using radio buttons as tabs. Thank you. How do I make a tab label's width match the width of the tab container?

  • @mattiethekoala5619
    @mattiethekoala5619 3 года назад

    this is just what i needed, love it

    • @ieatwebsites
      @ieatwebsites  3 года назад

      I’m glad to hear that! 😁 you welcome!!

  • @ainmosni4319
    @ainmosni4319 Год назад +1

    +1 sub
    This move way too smooth.

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

    It's working! Thank you a lot 🎉
    But can you help me? If I want to use a 2nd tab-window it just checked the tab-window above. So when I click on the tabs on the second tab-window below it just checked the tabs above xD

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

    hi, I just wanted to ask why I'm having a trouble on clicking on the first tab? Like, if I clicked the other tabs u can't go back to the first tab, unless u refresh it. Thanks in advance.

  • @prakashchandra5401
    @prakashchandra5401 4 года назад +2

    Thank you this helped me a lot :)

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

    Brilliantly explained. Thank you for a great video. I tried to get the little tabs to display rounded corners but didn't succeed. Anyone any idea?

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

      try putting a border to the label and having a border radius

  • @boytuhab
    @boytuhab 3 года назад

    Hey I added a button but when I click it. it returns to the first tab? Any suggestions?

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

    Hello can I know if this tabs can be hyperlink to each other?

  • @lumotohoneyqueen2103
    @lumotohoneyqueen2103 4 года назад

    hello, your tutorial is excellent. I had a problem on trying your code and replacing tag to form and table, the content wont show but the rest is goo. only when i hide it then click it, it wont show

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

    What can I do to make it work on mobile or responsive? When I click on it, it doesn't work.

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

    Awesome work. Thank you for doing this video ^^

  • @dix_mois
    @dix_mois 3 года назад +1

    Nice! Thank you man!!!

  • @rohaangeorgethomas7872
    @rohaangeorgethomas7872 3 года назад

    Due to variation in tab content, the size of each tab is different. Is there a way where we can set the tab length to be fixed?

    • @ieatwebsites
      @ieatwebsites  3 года назад

      You want the tabs to take 100% of the space?

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

    thanks! you're amazing bro!

  • @KwabzModding
    @KwabzModding 3 года назад

    how do yo add more than 3 working tabs i copy and pasted the code to make 4 but the after clicking odd the 4th it wont let me click on it again

    • @zanrylryla390
      @zanrylryla390 3 года назад

      Have you resolve this? tried also adding 4th but can't click it

  • @Sama-jx8vs
    @Sama-jx8vs 3 года назад +1

    Hello! Can you make a tutroial for responsive tabs? I would love it. Does anyone know of any responsive tabs tutorial I can follow?

  • @AnaAlvarez-ob9rg
    @AnaAlvarez-ob9rg 2 года назад +1

    greate video, thanks!

  • @sajjalahmed7450
    @sajjalahmed7450 3 года назад

    I have to do it on notepad... so how will i add css part doing on notepad??

    • @ieatwebsites
      @ieatwebsites  3 года назад

      You can add inline css, instead of external css.

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

    big thank you ♥i love things with only HTML & CSS
    do you think you can do like a "Side Navigation" with this?

  • @jeeerwin-24
    @jeeerwin-24 Год назад

    Thank you so much for this video!

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

    Excelente, gracias!

  • @ayesharehman4515
    @ayesharehman4515 3 года назад +1

    thanks man, nice job

  • @hiroshinakamura8095
    @hiroshinakamura8095 3 года назад +1

    Excellent

  • @johanstam3602
    @johanstam3602 4 года назад

    How make the tabs on the left instead of at top?

    • @ieatwebsites
      @ieatwebsites  4 года назад

      You need to add some CSS.

    • @johanstam3602
      @johanstam3602 4 года назад

      @@ieatwebsites Really .. is that your answer.

    • @ieatwebsites
      @ieatwebsites  4 года назад

      Yes. That’s the correct answer. You have to add custom CSS. I don’t have the CSS code.

  • @ManjunathManja1227
    @ManjunathManja1227 3 года назад

    Problem with this code is all the input tags inside 'mytabs' will have the same style (like tab)

  • @Xane-n5s
    @Xane-n5s 3 года назад

    Nice tutorial man but how do i add images?

  • @tompluto1
    @tompluto1 3 года назад +1

    Good Movie, helpful!

  • @bird271828
    @bird271828 3 года назад

    Thank you, this is great. How can I include a 2nd html file in my main html file?

  • @manish_aravindh_2007
    @manish_aravindh_2007 3 года назад +1

    Thanks buddy 😊

  • @ЕвгенийМалый-ш9ф
    @ЕвгенийМалый-ш9ф 2 года назад +1

    Thanks 🙏🙏🙏🙏

  • @hkhald01
    @hkhald01 9 месяцев назад

    How to make all div have the same height

  • @ndushmanthaish
    @ndushmanthaish 3 года назад

    dear sir...How to add Html,Css and Javascript file in to one Html file...Because i want to add Tabs to my eBay listing description.

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

    css master! thank you!

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

    it' saved my life

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

    Very useful man!

  • @Timooooooooooooooo
    @Timooooooooooooooo 4 года назад +1

    That's a very clever trick

  • @ndushmanthaish
    @ndushmanthaish 3 года назад

    I have downloaded your Html zip file thats working fine... thanks... I have created another Html ,Css and Java file...That 's 3 files only works in the same folder. when I add Html , Css and Javascript file in to one Html file thats not working. How to add Html, Css and Javascript file in to one Html file ...Please help

  • @tulioquestao8505
    @tulioquestao8505 4 года назад

    Good afternoon.
    I would like to know how to make a website with an after effects project editor to sell animated logos where the client does the editing of the project with his own logo.
    Could you help me with this, giving me this tip or, indicating a channel that talks about it?
    I'm waiting for you.
    Thank you

    • @ieatwebsites
      @ieatwebsites  4 года назад

      You want to create like an online after effects?

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

    Thank u so much.. like so so much!

  • @dirasadirasa2499
    @dirasadirasa2499 4 года назад +2

    Nice hack, we need DOM manupalation

  • @kaustubhmokal8947
    @kaustubhmokal8947 4 года назад +1

    Thank you buddyy ...

  • @raselmiah4410
    @raselmiah4410 4 года назад +1

    That’s so cool!!!

  • @frankietsoi10
    @frankietsoi10 3 года назад +1

    thank you so much!