Build Tabs Using HTML/CSS In Only 12 Minutes

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
Tabs are one of the most common forms of navigation on a website, but they can be tricky to implement correctly. In this video I will show you exactly how to create tabs using HTML, CSS, and JavaScript as quickly as possible. We will cover how to switch tabs when clicked, how to indicate which tab is selected and much more. I will also be explaining every line of code as I write it so you can see exactly why everything works.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/H...
CodePen Code: codepen.io/WebDevSimplified/p...
🧠 Concepts Covered:
- How to create tabs in HTML/CSS/JS
- How to hide/show elements on click
- How to move classes between elements
- Using data attributes to dynamically select elements
🌎 Find Me Here:
My Website: webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#HTMLTabs #WDS #CSSTabs

[@CustardyRhubarb]

I love these short tutorials on specific tasks - it's a great way to learn.

[@storymationpresents6106]

i agree also how has your progress been ?

[@AnnieTaylorChen]

a few years ago I wanted something like this so bad, but had no idea how to do that on wordpress. It's actually pretty easy if you can code. :) Coding is truly empowering!

[@WebDevSimplified]

Coding really is great. It gives you super powers to create anything you can think of.

[@yolo-mb4cy]

@@WebDevSimplified truth spoken

[@acesgndec2535]

@@WebDevSimplified Very True

[@bluffer8352]

This was very well explained, thank you. Few things for feedback: Could've used *{} for the padding and margin that needed to be removed, it might have made more sense to do it the way you did though. Not everyone is so familiar with arrow functions, that's only part of this that I got confused as I don't use.

[@DiegatusStudios]

Thank you so much for this! It works perfectly!

[@clilsneor624]

Really clear and great tutorial, thanks a lot!

[@Garfield2142]

Great place to start. Thanks!

[@TheType1Ninja]

Dude, you are amazingly helpful. Thank you.

[@elguneliko8658]

i did it on my own way and i am happy.It is around 10 week i started work on java script Your videos helps me so much

[@kronstadt662]

Thank you, you saved my life...the code work perfect

[@mobile_genshin]

Wow, any request I make while studying web dev, this channel has an answer, amazing👏

[@3060PlayZ]

Thanks so much! I made them look way cooler!

[@michawojciechowski827]

Thank you. I need this in my project.

[@73dines]

Very well done. Thanks!

[@WebDevSimplified]

You're welcome!

[@MontyKsycki]

Thank You Very Much for Sharing!!! Very Much Appreciated!!! :) 🙏 🙏 🙏 🙏 🙏

[@danielschmitt5750]

I totally forgot about data attributes. Thanks for reminding me ;-)

[@blakecraft9506]

THANK YOU SO MUCH! IM DEFINITELY SUBSCRIBING!😊

[@patrickmohrmann6540]

Very nice videos. I just stumbled recently across them

[@bikramchettri9405]

Superb tutorial very helpful indeed

[@WebDevSimplified]

Thank you!

[@mesteme]

0:34 "…which when we highlight over them, it's just going to hover a little colour" 😃I have e friend who sometimes inverts words like that

[@alejo_3d_art]

Thank you... Even I don't know yet any of Js I could make it work. Great job

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@Jayjay-cg2in]

Great video kyle!

[@WebDevSimplified]

Thanks!

[@pipepi4888]

gracias por el video. Eres lo mejor. Cuídate mucho

[@user-lx7os4is7w]

Very Well Explained every things one by big support dear!

[@AlexIvanov-uh1yz]

thx kayl, easy and fast!

[@hectorlgg]

Excelente, aprendi bastante... Thanks.

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@deevagh]

this is awesome. Thank you !

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@VincentOldMark]

hey how do you style each data-tab-content individually thanks for your help

[@hectorPerez-qf1ho]

thanks, wonderfull tuto

[@brunobrasil3419]

Thanks a lot, bro!

[@roanmaravillo8342]

Thankyou Kyle thumbs up

[@heavydirtysoul1491]

great tutorial, thank you

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@sabuein]

Again, thank you, Kyle.

[@wanharaziz3055]

At 6:37 my code is not running although I have copied exactly the same thing u have written sir. Please help you are really incredible!

[@petra9313]

It is the same for me

[@dainah105]

you're a legend thank you

[@DailyIntern]

You are awesome. The way you type i wish i can do it too.

[@WebDevSimplified]

You can. It just takes practice.

[@DailyIntern]

I will follow it

[@scubet2094]

could you help me a little bit, at 3:58 for the query selection, you use a square bracket in the code line ("[data-tab-target]"), why is this done I cant find any answers online

[@shehariyarbacker8456]

Hello Sir your tutorial is really wonderful. If I want to add another layer of tabs say inside each of the home, pricing or about how do I tweak the code to achieve that. For example in Pricing I would like to add a product category list and each list having certain products. Is it achieved by nesting further loops?

[@DiegatusStudios]

Same question here

[@andyli2927]

from what i understand, i think you can somehow try to figure out a way to maybe remove the other target tabs? when you click on pricing. Then after clicking on pricing you set the other tabs you want on the pricing tabs, visible. these are just my fundamentals, not exactly sure how to code it Lol. give it a try though, same for me

[@carlosvalenciah8306]

thank you senior,

[@fu2201]

This guy is a robot, he does not blink

[@eliasblankenburg1497]

Is it possible to add a transition between the text changes?

[@C_Ariss]

Hello, I am trying to create my first ever test website. Generally is it good practise to have all tab content information in the one HTML file and use data attributes (like in this video) to show the content you want to see, based on the tab you have clicked on, or is it best to have separate HTML files for the separate tab page content and use a refs to select them? Sorry if its a daft question but I have seen it done both ways, and don't know the benefits of either yet.

[@WebDevSimplified]

It depends. If you have a small amount of highly related content then tabs are a good idea, but it is more complex to create so if you have lots of differing content such as an about and home page then doing separate HTML pages is probably best.

[@C_Ariss]

@@WebDevSimplified thank you Kyle :) i will go with separate HTML pages for now, just so its less on one page for me to look at whilst i'm still getting use to everything. Been working on this nearly an hour and only just finished my nav bar!

[@WebDevSimplified]

@@C_Ariss Separate pages is almost always the right answer so that is a good choice.

[@nurlanhuseynov1807]

Thanks

[@BurstFlare]

Hi, question. Is there a way to have tabs influence stuff outside of them somehow? Like, for example, changing the background color of a div that exists outside of the tabs depending on which tab is open?

[@andyli2927]

saving this

[@KenCoppola]

I'm trying to implement this in Angular 12. Is there a way to use the tab.dataset.tabTarget in Angular? I keep getting property dataset does not exist on type Element.

[@dallasshelby6501]

How can I make this work when nesting the tabs? I tried changing data-tab-target to idata-tab-target and it would work. apparently, I cannot change data-tab-target. If I do the querySelector returns null. Please help.

[@arazturk2690]

that was perfect

[@fabriziotofanelli]

amazing content as usual.... just missed one little thing... a hash on url... so I could send to someone the right place instead to say to her where to click ... what you think? =)

[@WebDevSimplified]

That is a great point. This would be a good thing to add on yourself since it isn't too difficult, but does test quite a lot of JavaScript skills.

[@yolo-mb4cy]

Tell me what u found out then

[@colinzervas]

Do you have an example of this somewhere? I’ve been looking and cannot find this and am looking for this exact functionality so that if I share a link with someone it will open the correct tab. Thank you in advance!

[@hallie342]

I’m not really understanding the JavaScript part of this. Do you by any chance know any good beginner resources for that?

[@tomasgrudny2870]

Having some trouble with the tab content not appearing on any of the tabs apart from the first one. Any idea what could be wrong?

[@vitamax3777]

hi! how we can change the color of tabs? For exaple: first-tab->bacground: red , and second-tab->background: green. If tab is active it should be different background color

[@WebDevSimplified]

You just need to use CSS to do that. You can apply a background-color to them and use classes to add different styles to different tabs.

[@basharawwad5451]

Thanks a lot for this great tutorial, actually I have one problem, I followed all the steps shown in this video, but when I click the tab, the content will appear once and immediately will disappear. I check the debugging in console and found the active class is added but then it is removed. I do not know what is causing this problem. Any Idea? Thanks in advance

[@aroundjavascript1454]

Thank you so much

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@conexoesind6478]

Any thoughts on having these tabs automatically loop with varied timer like a carousal and also clickable at same time. How could it be made to show automatically? Please help Kyle or anyone else who is reading this comment. Thanks

[@fb7230]

I have done this in Vs Code, but could not get it to work. So I tried to debug the code in VS code and could not get that to work. Is it possible to debug this lesson in Vs code, and if so, what are the appropriate extensions and settings (especially for json if any). thanks

[@alternativerey5127]

wonderful

[@zainulkhan8381]

Can someone please explain me this line const target = document.querySelector(tab.dataset.tabTarget) he said that tabTarget will target your HTML I am not able to understand what is the use of dataset and tabTarget else the whole code is clear

[@jgeurts8343]

Hey Hey. I have a question. I already build a base of the website and wanted to implement this into it. But i have no idea how i could get the base that i already had into the Home tab? do you have a video for that or a short Turtorial?

[@jgeurts8343]

Nevermind i fixed it

[@OrincyWhyteDesigns]

Omg thank you !!! Only think I’m blanking on is at 4:34, What is the tab.dataset.tabTarget? Why was it written like that? 🤔

[@zainulkhan8381]

Did you got the answer ? I asked the same doubt you can check the recent comment

[@charlesxavier77]

Awesome, I was actually really looking for 1 of those. I didnțt really get the tab.dataset.tabTarget, especially the tabTarget. Will you do a carousel tutorial? Like the bootstrap one? There is no tutorial for that. I built one but I canțt make it start over and move on a set time.

[@WebDevSimplified]

The idea of a carousel is on my list of ideas but it is pretty low right now.

[@maksymantoshkin2896]

node.dataset is built in property for each DOM node. It is an object containing every attribute that begins with data- of an actual hard-coded DOM element in camelCase. For example will have property div.dataset.lolLol

[@charlesxavier77]

@@maksymantoshkin2896 ooo so the data-tab-target turn into tabTarget?

[@maksymantoshkin2896]

@@charlesxavier77 Yes, indeed!

[@charlesxavier77]

@@maksymantoshkin2896 ty

[@rohanphadnis6812]

i want to have multiple of these tab sections on one page, but when i just copy and paste the code, it gets messed up. How do i fix this?

[@yourfellowmuslimyagi2065]

Thank you

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@abdulrahmanemad1484]

nice!

[@thatomhp1238]

hi i tried adding more than 3 tabs but the other tabs dont show any content ihave placed

[@joseluisnm8499]

Awesomee

[@Xx_YourM0M_xX]

Amazing

[@robertbiljaka665]

I can't change a tab. I'm only looking at the home tab content. Pls help!!!

[@kontanchis2263]

if u need help, use the github code, is in the descripiton

[@walmartbag777]

Build Tabs Using HTML/CSS In Only 12 Minutes. Me when the: JS

[@Bangtan4Life13]

can I used this in forumfree?

[@nestanettamiru2987]

Pls do it , step by step

[@ramlynjaysaure3601]

thanks

[@digitalsols]

Nice

[@nafismolla5946]

just a quick question why is the # needed for the data attribute names

[@sergiopile6102]

id

[@icemayne]

does is automatically update? i have everything typed in as you and the website wont load

[@ultronsam1214]

I did the same you did. The console be telling that tabs.forEach is not a function. Did I go wrong with something?

[@darios8564]

How would you make proper links to those tabs so we can achieve following: 1. We can send direct link to certain tab 2. We can refresh tab it doesn't switches back to default active tab Thank you!

[@colinzervas]

Did you ever find the answer to this?

[@jeffreyrjsumalde9099]

Update about this question

[@ColePerrine]

What are the odds you have this written out somewhere that I can just copy-paste because I have to be fucking up somewhere. As soon as I get to the display: block; part it stops working for me

[@nirozanananr3188]

Super dude

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@randomvidoes]

Make a video on HTML 6 and CSS 4.

[@Epanyo]

One question like how to use pictures as tabs?

[@VincentOldMark]

can you set data-tab-content on an image

[@VincentOldMark]

No it's just i was having some issues with react

[@blakecraft9506]

Um, it's not working. 🤔

[@kontanchis2263]

just use the github code, is in description

[@Hyper-pixel-official]

hello, i have written all of my css and javascript code but I,m not able to click on any tabs. I have done everything you showed in the video step by step, but I'm still not able to click on stuff. Any help from you OR the community would be very much appreciated.(If this video is still relevant) Thanks for the video btw.(the code is not working here 6:37)

[@tomasgrudny2870]

Same issue

[@Hyper-pixel-official]

i was able to fix the issue while watching your "how to create responsive navbar" video. thanks @ Web Dev Simplified

[@bssgiridhar]

Make a poll with realtime pie chart result same webpage using html css javascript

[@UnknownUser-ts1sw]

when I try to replace [data-tab-content] using class it doesn't work but why? anyone?

[@ldt_]

Nice. But what about a dynamic bar with tabs? So instead of opening a new tab in your browser, you have tabs on a nav bar that you can go back and forth between as if you were comparing two tabs visually yourself or something. (AKA like Salesforce tabs)

[@WebDevSimplified]

I am not really sure what you mean. This sounds like what this already is.

[@ldt_]

@@WebDevSimplified Here you go, took me a few minutes to find a video: kzbin.info/www/bejne/rZCzeouMmsZsl68 So in the beginning, he is creating new browser tabs for customer records. Then using a certain feature in Salesforce, he was able to open new tabs within the same browser tab as if it were a browser inside of a browser if that makes sense. That is what I meant by dynamic.

[@WebDevSimplified]

This would be a modified version of these tabs that would load content dynamically and probably use an to store the loaded html.

[@ldt_]

@@WebDevSimplified Well, with Salesforce, they are session specific, s would be gone if you close out of the browser and reopen again so either the tabs (sessions of each tab) are stored client side in temp or the data is being saved server side based on user id logged in and short url's and then doing a query with foreach statement to dynamically populate each tab. That would be a fun project :P

[@cherry-lp8yq]

OMG, this is so complicated :'( :'(. no, it's not I just don't know about the data attribute.

[@adomwest6117]

I thought we were not supposed to use the H1 to stylize multiple items?

[@chirilcugureanu1853]

Wow, with this method you can create a single website with more tabs, which can look like a navbar and make someone think this is a one page application 😆

[@robertwulff5072]

i did everything like in the video but i can not select between tabs. can somebody say why?

[@acesgndec2535]

on which software are you Coding?

[@daanverkerk481]

Visual Studio Code, it great and free :)

[@imane5971]

my dataset.tabTarget returns null when i use it in the selector, why is that?

[@opensaucerer]

did you set it equal to your list ids. (#home, #pricing....)

[@imane5971]

@@opensaucerer i was missing a dash in the id, stupid mistake, totally my bad hehe

[@letseeyousmile2425]

Oh! No problem.

[@user-cu1zj3wr1d]

why do i need to use the data tab why just using css to do all stuff ?

[@macrepman4098]

You should explain it slower, for people trying to follow along it's difficult to understand what you're doing when you're basically talking like you're reviewing for yourself instead of teaching.

[@sirdeeq_wada]

Did everything you did and still didn't achieve my goal. The pricing and about tab doesn't click and only the home tab shows.

[@arpitbharadwaj8799]

what is tab.dataset.tabTarget???

[@konstantinkkk8397]

pls chage heading of your video. You use html/css/js

[@TK-oj7id]

how do i use this on notepad++

[@GamerKittyEuphoric]

I need this with CSS / HTML only for sites who block Script

[@ashwinsamatingo829]

is it normal that you were not closing your statements, I meaning putting semi colones at the end of your statements

[@nates.9820]

Closing Statements with semi colons in JS aren’t required. It’s more of a preference thing. Some companies require semicolons because they often look more organized and stuff, while other companies could care less because they don’t do anything for the most part.

[@ehsmetlemcen]

you can also check this awesome animated tabs kzbin.info/www/bejne/mmqwiGikha6aic0

[@omergunes56]

Yes html and css only + javascript