 Hello and welcome. This is going to be a quick little video. I hope to go over this sort of thing more in depth in the future, but this is a quick demonstration and explanation. So here we have three little boxes, but just consider these as different parts of a page that you want on different tabs. And these buttons will control what tabs are shown at a time. Right now they don't do anything. I can click on each one of these. Nothing happens and you can see all three. So what we want to do is we want to load the page, show only one of these at a time, one of these sections, and then have those buttons flip through those sections depending on which one you click. So real quick, this is the code for this. It's very simple. I threw it together real quick. I am going to be using Bootstrap and jQuery just to make things, Bootstrap to make things look nice and jQuery because that's what I'm used to working with. But of course everything done in jQuery can be done in plain JavaScript if that's what you prefer. It's just not how I'm going to be doing it. So if you look real quick here, here are our sections. I give them each an individual ID of either Sec 1, Sec 2, or Sec 3. Of course you can call them whatever you would like. And then each one has a class. The container class is just part of Bootstrap, but I also gave them a class of Section. So what we can do now, if we go back to our web browser here and open up our console here, I can say in here, dollar sign, parentheses, quotation marks, dot means class. And I can say anything with a class of section, of course you have to spell things properly, section, I can say dot hide. And that will hide all of them. Now again, they each have their own individual IDs, so I can give them the IDs. So again, dollar sign, side, parentheses, or yeah, parentheses and quotation marks here, pound, dollar sign, hashtag, whatever you want to call it means ID. And I'll say like Section 1, I can say dot show. And it will show Section 1. If I say show Section 2, it will show Section 2. And again, hiding anything with a class will hide all of them. So what we can do is we can say hide them all. And then real quick after that, we can say Section 1 dot show. So what's going to happen is it's going to hide all of them real quick and then show whichever one I tell it to. But it's going to happen so quick you're not going to see that. So there we go, we're showing Section 1. Now I can say Section 2. So it's going to hide them all, whatever's visible, and then show Section 2. And so all we have to do now is program our buttons up here to do exactly that. Now we don't want to write a function for each one of the buttons. As a general rule in programming, if you are going to type something, some code, you should never type it more than once. If you're going to use it more than once, then it should be in a function of some short sort that is called. So what we're going to do up here is for each one of these buttons, let's go ahead and give it an attribute. An attribute for these objects or things like href or class or id or name. Those are standard ones, but you can make any attribute you want. So I'm going to create an attribute here. And what I'm going to do is I'm just going to real quick say here, I'm going to say sec equals and for this one I'm going to say sec 1. And I should have put a space in there. But I'm going to call them section 1, section 2, and section 3, which will correspond with, this is section 1, it will correspond with the ID of this. Section 2, ID of this one, section 3, ID of this one. So that way we know when we press a button the function can look at that and correlate it to the tab that we want, or in this case the div tag that we want. So what I'm going to do in here once the document is loaded, we're going to say anytime, anyone, and again these are the ones that have class, I gave them a class of sec bnt for section button. So I can say sec bnt. So anytime one of those is clicked, we're going to run this function. And what are we going to do in here? As we said, we want to first thing we want to do is find everything with a class of section and hide it. So again, if we restart our page now, if I click any one of these, they're all going to disappear. So far so good. Now we want to get this attribute here of sec. So what we can say is we'll create a variable called var sec equals, and then we'll say inside dollar sign parentheses, no quotation marks, this dot for attribute. And in here we'll say sec. So it's saying look at this, which is the button that's being clicked. Look at its attribute of sec and set our variable in this function sec equal to that. We can check that by saying console log and sec with no quotation marks there, because it's a variable, not a string. Well, I guess it's a string variable. But so now when I click one of these, they shall disappear. But we'd also see down in our console here, which button is being clicked. And what section is correlating to we can get rid of our console log now because we've already checked it. And what I can do is just like before, we can say pound for the ID but then outside the quotations plus sec, which is going to be this variable right here, which is the sec attribute for that button. And again, I'm calling it sec short for section, you can call it whatever you want. I can say dot show. So now I save that I rerun this we see all our sections and I can see section one, section two, section three and I have these little boxes, but it can be a whole page worth of stuff. For example, I can come in here, and I'll just copy this twice or three times. How about that? So now we have section one is these three, section two, section three. So again, it could be tables, it could be pictures, it could be cells, it could be whatever you want. But the only thing we have now is that all the sections show up when we refresh the page. We don't necessarily want that was go ahead and close our developers console there. So what we're going to do is up here is we're gonna say when the document's ready, when the document loads, we will say hide all of them. And then we will show whichever one we want by default, which could be section one or it could be section two, whichever section we want. Let's say we want section two by default. So what's going to happen is when the page loads, once the page loads, it's going to hide all those sections. And those are buttons aren't in those sections. So you can have a header and a footer and some other stuff that's always on the page. But anything that has the class of section is being hidden. And then it's going to go okay, what has the ID of section two, which with an ID there should only be one object. We're going to show that. So we'll save that. Oops, I quit out of it. Let's go ahead and go back here and I'll refresh this page. It says is another section. So that's section two. So if I hit section one, there's section one, section three, section two. And again, it's whatever section you want to show at the beginning. I can make section three show if we want. So section three show it first. I go two, three. And that's a simple way to make little tabs to choose what's being displayed. And there's a way to put animations on these. So they slide in and out or maybe accordion style. But what we're doing is just real quick, they're there. And that's it. Again, so just a quick look at this. But I mean, this is all, you know, HTML down here. The only code that we're writing is, you know, these six lines, seven lines right here, saying to hide and show what we want when a button is clicked. So again, quick and easy way to do tabs without any special plugins or anything. Well, I mean, we're using jQuery and bootstrap. But you can do this with pure JavaScript, the same thing, just it's a little bit longer, you have to say document find object or element by ID and give it the ID. I just prefer using jQuery. And I hope you found this useful. Visit filmsbychrist.com. That's Chris Decay. There should be a link in the description. And as always, I hope that you have a great day.