JavaScript DOM Tutorial #17 - Tabbed Content

Hey gang, in this JavaScript DOM tutorial I'll show you how we can create a tabbed content box.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
Other tutorials:

----- JAVASCRIPT FOR BEGINNERS:

----- CSS FOR BEGINNERS:

----- NODE.JS TUTORIALS

============== The Net Ninja =====================

================== Social Links ==================

[haseebquadri]

For those using the Css of the earlier files, this may not work. Just change .tab to .panel i your Css file.

[knoiohi]

i love this! Thank you net ninja! You are truly the programming sensei that we need

[javabeanz]

I want to say THANKS! for this video, it fit right into the project that I was working on, the other Tab methods I checked out really didn't fit in with the rest of the project.

[mitulgupta]

Nice video! Just one thing to notice.. in the event listener added to tabs we could have checked whether the target li tag was already having class set as active or not and only proceed to change it when it wasn't active. This way setting the class attribute in the li tag would have been of some use.

[kotik]

Hey, thank for this all, you are the best, i really love your tutorials, i even cannot express my respect to you, I'm really grateful, thank you, thank you bro
Yours sincerely
Little Ninja

[zuber]

tanks a lot to make this video, you know i was crazzy to learn this thing, i try my level best to find it everywhere but i did't get, one day i visited you'r youtube channel, there i found, now i am so happy that i know this, and i got this

[Abaramotorai]

Holy Cow! You are the best! Thank you.

[boboboboboboo]

curious why doesnt it work if the conditional e.target.tagName == 'li';
why does it have to be upper case? i confused
EDIT: had something to do with taglist being returned in caps meh -.-

[rastacrunkb]

Thanks Brother!

This is with the Spread operator && arrow functions


tabs.addEventListener('click', (e) => {
if (e.target.targetName == 'li') {
const targetPanel =

[...panels].forEach((panel) => {
log('foreach: ', panel);
if (panel == targetPanel) {

} else {

}
});
}
});

[nikosspiropoulos]

Hello, could someone explain what this "Data-target" actually is and how it works? Thank you very much!

[rFootprint]

Great! This is what I've been looking for! Thank you Ninja!! :)

[MrCritterJohn]

How does the if(panel == targetPanel) comparison work? I understand that targetPanel contains either #about or # contact, but what is the value of panel? Do we just infer that panel contains either #about or #contact also?

[start]

tagName() returns all uppercase, it's a javascript weird part.

[EpicFailfun]

In the last if you are comparing element from Node list to a string which contains id. How does it work that "if"? It returns true while there are a lot of other data inside this node so how it know that it has to mach this exactly id not for example class or element name?

[hcx]

1. getElementsByClassName, getElementsByTagName returns *HTMLCollection*

console.log(title);
});

2. querySelector, querySelectorAll returns *NodeList*

console.log(title);
});

[gagankp]

On line 48 of html, there is a class of active. Can someone explain why is it there. There was no change in execution even if I removed the class

[levaninatenadze]

i want to click somewhere in this document and remove active class, how to do that?

[TheCrowdel]

why the "li" need to be uppercase "LI" ??

[andrewcbuensalida]

It would be better if you showed the end result while you were building it.

[bjarnieinarsson]

Nice.. is there simple way to fade in a active content and or fade out none-active?
(for all browsers)