How to Create Switchable Tabs - HTML, CSS & JavaScript Tutorial

In this video we'll be looking at creating tabbed sections from scratch using pure HTML, CSS and JavaScript - it's super easy to do and doesn't require that much work.

Note that this doesn't require any sort of library such as jQuery or any other front-end JavaScript framework.

Support me on Patreon:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #webdev #javascript

[vaishalitiwari]

This was the only video that actually taught how to form tabs AND display the contents of each tab only on click... and hallelujah! it actually works! Thank you soooo much for this video...you are a lifesaver. I would have been on the wrong side of my teacher had you not uploaded this video. Keep uploading more awesome videos and helping students like me : )

[alimansourey]

The idea is simple. The html and css parts are straightforward, The problem is in class naming ... he used the word tab everywhere .. It woould easier if he used something like : Tab, content, . Also I think the document loading event is not necessary . This guy is highly skilled .

[maryAguti]

Great video! Really easy to follow along. I had the same issues as everyone else with the null and that back tick is what got me.

[TekkenRoom]

can't imagine how grateful i am for this tutorial, thank you sir

[rkinsas]

const tabToActivate =
May be useful to someone..

[_PieceOfCode]

love the tutorial it was very helpful. thanks man you get a sub today 👍

[_PieceOfCode]

1:15 if the css file is empty then why there is styling on the h1 tag??

[pcslowhand]

Thanks for the tutorial. I had problems with the "button.classList.add" and "tabToActivate.classList.add" lines of code towards the end. I ended up using "button.classList = "tabs__button tabs__button--active" for it to work but I don't kow why your code wasn't running. Thanks again.

[francoise]

Thanks for mentioning BEM. didn't know that was a thing :)

[sallahbaboucarr]

Thanks so much, this video was a lifesaver

[joshcollins]

I've gone through everything in the video and have it working but the buttons aren't working properly. The active button changes colour after becoming active, only after I click the button and then click elsewhere. It's like this for both Edge and Chrome at least. Any ideas why?

[jorgeto]

Great video but for some reason this line does not work for I get the following error message

:110 Uncaught TypeError: Cannot read properties of null (reading 'classList')
at HTMLButtonElement.<anonymous>

Does anyone know how to fix this?

[anishk.]

On the CSS part, only one of my sections are dissipearing, and not all of them. I did exactly what you did though

[elifas]

Thanks, that was pretty useful information

[paulmoldovan]

How can i submit a form inTab #2 and stay in Tab #2 after form is submited?

[jdeso]

I love the idea of this but I can't make it work I've been proofing it for two days I found a couple of mistakes but they didn't fix it it doesn't work when I click on the tab I don't get any little green bar or bold text and I don't see the content I sure wish you'd post this codes that somebody could just download it.

thank youu, I should try it immediately!

[keshavgoyal]

How can I implement an add tab or new tab button?

[yousseflahmadi]

I really liked the video thank you .I have a little error tabscontainer in tabToAtctivate is indefined but i sure i a did the correct classe do you have anyidea why ? Thank you in adavance .

[malazma]

Is it possible to activate the last selected tab, i mean if we save last tabNumber and activate it while reloading the page.