How to create tabs using HTML, CSS and JavaScript

In this video I'll be showing you how to create tabs using html, css and JavaScript
Download Project code:
www.lohartalk.i...
Please don't forget to like,share and subscribe my channel.

[@theskaje137]

i from Russia but i understand ur language all time . Good pronunciation my friend!!

[@LoharTalk]

Thank you for your valuable feedback.

[@desse56]

Fantastic work, this saved me from having to use the confusing electron-tabs module!

[@rhjiv4]

I have been looking all over for a simple example of how to invoke a set of pages that each live in a different tab. What I need is a simple example of the syntax of the anchor tag. For example,

[@wonderboy21]

I really hate HTML (web dev) and everything go over my head but u saved my day... thanks

[@OberynPinkViper]

Dude, you're an absolute legend for this video! Thank you for uploading it.

[@Siraj-123-q5p]

You can also add animations to your tabs using css in the tabcontent section .tabpanel { animation: fadeEffect 1s; } @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }

[@ΑντρέαςΣωτηρίου-π8γ]

Where can i put this code ?

[@Siraj-123-q5p]

@@ΑντρέαςΣωτηρίου-π8γ in css part of the program

[@maxwellmuhanda7940]

I'm new to Javascript but understood everything . Thank you soo much

[@JasonOtto]

Thank you very much. Greatly appreciate your time and effort.

[@rodrigobranco4472]

congratulations on the video! God bless you!!!

[@rohansingla4270]

Really helpful bro thnx

[@Mercenarys]

I’ve been looking for this but didn’t know that specific name for it thank you!

[@rip182]

Its nice that u have recap on explaining after doing all that code

[@jasonh8556]

Great instructional video! Good job at explaining what each thing does and why it’s added to the code.

[@ehsmetlemcen]

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

[@adcompinc9637]

Thank you so much bro, you save my life!

[@_ifrit]

getting back into web development and glad I found some of your videos. Very clear and helpful guides!

[@LoharTalk]

Thank you for your valuable feedback.

[@asma-rg1nx]

great...

[@viralrakholiya4493]

good work bro and good source code

[@Luka_WiFi]

ძმა ხარ. God bless ya!

[@mrwaffleman8732]

fantastic

[@jmondera]

Thank you for the video! I just have one small request...please open the coding window enough to show all the code. It's hard to see the top lines of your javascript code.

[@haroldaaguirreg8241]

thank you very much, this video is simple and direct, find another video better than this I think it is impossible

[@numanakhtersiddiqui6573]

best💯

[@Erith77]

Awesome work and explanation. Thanks a lot for this tutorial.

[@abirhal2391]

thank you ! you saved me

[@ibrahimhassan5411]

thanks. this is the best tutorial that comprehensive.

[@LoharTalk]

Thank you for your valuable feedback.

[@ibrahimhassan5411]

how can I have next and previous buttons using this code.

[@LoharTalk]

@@ibrahimhassan5411 Hi,call this method showPanel(0,'#f44336') where 0 is index of tab. you can increase or decrease it on next and previous button

[@FlorianEagox]

Good stuff!

[@ehsmetlemcen]

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

[@falakhkarim9011]

nice work, your tutorial is very helpful

[@ehsmetlemcen]

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

[@DEECODER]

thank you very much

[@Oguztogrul]

Thanks, bro! Well done!

I love you Man you save me

[@RajeshDinesh3006]

what is the command run in vsCode to see the output in localhost.

[@acm...]

Extremely useful ! Great work!

[@reinaogo7161]

love it!! you are a lifesaver

[@asgeralia8802]

Superb, how to use in django

[@Juanbaez_]

I have to say, I normally hate the hindúes video, but this guys is awesome and clear to understand. Also, he explained js very clear. Keep it up, you will make it in KZbin. He earned my support!

[@LoharTalk]

Thank you for your valuable feedback. Now you can also Preview code demo and download it from www.lohartalk.com

[@LoharTalk]

It will appreciated if you can provide your feedback on our website www.lohartalk.com by click on Feedback link so that we can improve our services.

[@akshayakumar7359]

Superb. Can you please tell me how to add a "close button" into each tab? Like when we click on the tab it gets highlighted and the close(x) button appears, if we click x the particular tab will be deleted.

[@jonipeperoni6454]

how do i make one tab longer? if i just add more things and use ,its gonna leave "frame" or "background",please help

[@loopymomy2532]

tabpanel play around that

[@raquelasirit5434]

nice video tutorial.. great its working i have a search filter before the tabs then its working at the first tab only and its not working at the other tabs, the id's and classes are same but it cannot work.. thank you please help me sir

[@sarabibrahim8312]

👏👏👏

[@tkszmrn]

honestly, i can't thank you enough

[@AnkitSharma-nf6kc]

I created a website which changes colour of background as we change values of rgb through metres on screen .. now I wanted to add functionality of gradient too but using your way I can change the page no issues but that same JS is now not letting me change values on gradient page while still working fine on Background page.. Please help if u can --> I will surely subscribe

[@bishwajitdebnath]

Can I use tag instead of ?

[@LoharTalk]

Yes you can but then you need to change css accordingly.

[@paulyoo7479]

how did words in the tabPanel(without using ) have breaks in the lines?

[@MrHuntPowa]

Thank you for the video, it was very helpful

[@LoharTalk]

Thank you for your valuable feedback. You can also view/download project from www.lohartalk.com

[@sandeepa4116]

Thanks for this great tutorial. Its really very helpful :-)

[@darshanarane6355]

Thank you 😉😉

[@chandrasekar-lr1fh]

Is this responsive ...every thing cleared ..nice explination

[@LoharTalk]

No its not fully responsive.

[@daffaaldzakianfauzi8721]

Thankyou, this is very helpful. You deserves more likes! thumbs up👍

[@lucenera]

thank you very mutch, this was very useful to me.

[@kadarbatcha9088]

what is the application i need to have this in my laptop

[@inzaghi7712]

I've already sent the email sir for requesting codes for this. thankyouu

[@LoharTalk]

Hi, We have already mentioned the link in video description. Kindly find the link below. www.lohartalk.com/#/watch?v=PzSxehu4G78 Below video name click on project code button

[@LoharTalk]

Let us know if you are unable to find.

[@ndushmanthaish]

Unable to add eBay description...Please help me to add these Html , Css and JS file to ebay Description ...

[@MikoyKim]

how to create a "add tab" where users can click and add a new tab page?

[@muninderkumar6721]

thanks!!

[@mbc1629]

Thanks !!!

[@robwhitestone]

any idea why this will not work when working with php sessions?

[@lpseeen5030]

you promise new video whery?

[@noopurp123]

Good Tutorial, but you can also do this with one tabPanel div...

[@23jgagnon]

Hi, I really enjoyed your video! I am having trouble executing the js function upon clicking the tab. Any suggestions?

[@LoharTalk]

You can visit www.lohartalk.com website and view/download the project for your reference.

[@musicopera3851]

i have the problem too sir please help me solve this

[@LoharTalk]

Download the project using this below link www.lohartalk.com/#/watch?v=PzSxehu4G78

[@actaeon5770]

Hello LoharTalk I've been wondering if I want to remove colors. Is it safe to make colorCodes to comments ?

[@amazonreview7927]

Thanks, bro!

[@ltybc425]

Thank you!

[@chandanmaurya9055]

Facing issue :- by default tab 1 is selected. When I'm clickinng on other tab page is getting refreshed and after refreshing again tab 1 is selected.. ???

[@jekotediashvili8794]

please tell me one reason why are you writting that editor?

[@LoharTalk]

Now i don't use that. Currently I'm using VS Code.

[@abhiklhkr6530]

What is the name of the editor you are using

[@LoharTalk]

Phpstorm

[@Badnampaisa]

How to add in blogger theme

[@dileeplakshan7373]

What is the software that you used to create this?

[@LoharTalk]

VS code

[@dileeplakshan7373]

@@LoharTalk Thanks

[@MixReef]

how to rotate those tabs sir? anyway, thanks for awesome tutorial

[@LoharTalk]

Thank you for your valuable feedback. Kindly explain your question.

[@MixReef]

​@@LoharTalk how to looping this . because when i make another tabs form in the same layer i have to edit that showPanel manually

[@LoharTalk]

In that case you need to dynamically create the tabs and buttons using javascript.While creating you assign unique ID to every tab and pass it to showpanel function.

[@MixReef]

@@LoharTalk sir, can you make example please? i try but still didn't get it. you can send it to [e-mail] thankyou

[@asakakubota4165]

I am getting left-hand invalid in node part Node.style.background-color=‘“” Can anyone help please?

[@LoharTalk]

Try thi Node.style["background-color"]=""

[@asakakubota4165]

@@LoharTalk That worked, but now it says tabButtons.forEach is not a function

[@LoharTalk]

Hi, Download the project code from below link www.lohartalk.com/#/watch?v=5YKaBri5uP0

[@asakakubota4165]

@@LoharTalkI just watched the video but there is no code related to this one?

[@LoharTalk]

Hi, Download the project code from below link www.lohartalk.com/#/watch?v=5YKaBri5uP0

[@noopurp123]

You can in fact do this in pure CSS by using radio buttons

[@gayatri263]

Sir this code is not working Plz help me My panels are not coming only tabs and hover effect on them is visible I followed this entire video What's wrong ?

[@manormasharma2517]

same problem occurs with me....... add your js file above body tag and then check...all will work

[@LoharTalk]

You can download the project code using link given in description.

[@myworld7667]

my friend how i can display tabs all of page

[@ehsmetlemcen]

check this is full page anmiated tabs , kzbin.info/www/bejne/mmqwiGikha6aic0

[@AnimatedAzterkGT]

Can you please send the codes i need this on my capstone, pls

[@LoharTalk]

Please look in video description you will find the website link.You can download the project code from there.

[@tejindergrewal6606]

Can you provide the code aswell

[@LoharTalk]

Kindly provide your email id or mail us on [e-mail] for the same.

[@tejindergrewal6606]

[e-mail]

[@tejindergrewal6606]

thanks i am waiting for it

[@LoharTalk]

Kindly check your mail and let us know in case any concern.

[@aniketbhosale1444]

[e-mail] can you send the code

[@sayedshawdagor5031]

why i can't go to the project code described?

[@LoharTalk]

You can find project code at following path. www.lohartalk.com/#/watch?v=PzSxehu4G78

[@helpdesk3925]

given link for download is not working

[@LoharTalk]

Hi link is working fine.Go to that link and click on "Project Code"

[@humbertomoli99]

You can do it only with css

[@abahiduh3246]

hmmm

[@MohdAsif-bo9cl]

i tried but i could not do this .pls help bro

[@LoharTalk]

You can download project code from below link. www.lohartalk.com/#/watch?v=PzSxehu4G78

[@Mohamedadel-fz2wy]

the link is not working

[@LoharTalk]

Here is project preview www.lohartalk.com/assets/Preview/PzSxehu4G78/

[@Mohamedadel-fz2wy]

I want the code can you send it to my by mail please

[@LoharTalk]

Which link is not working?

[@Mohamedadel-fz2wy]

@@LoharTalk thelink you just sent to me and the one is the description

[@LoharTalk]

Try this and let me know drive.google.com/file/d/1DH6UFcBTLSvl1FlvMkyqOeEH2EpwUgT9/view?usp=drivesdk

[@edwinleonardo9340]

hola puedes poner el link de la descaga porfavor, no sale nada en este lik solo un menu

[@LoharTalk]

Kindly provide your comment in English

[@evgeniivasilenko9104]

Download Project code: - reference don't work

[@LoharTalk]

Website under maintenance.

[@ZainSuleiman666]

This is bad code, this isn't how devs should implement this idea

[@miguelquintero5937]

the link does not work