Hello, in this video, we're going to show you how to create tab paint like a section for each tab. So we've got these tabs at the moment, we click them, they don't do anything at all. But what we're going to do is create a separate section. So when we select one, the content for that section appears. And it doesn't refresh the page or anything like that is all handled via JavaScript. We're not going to be coding any JavaScript is all built into bootstrap is just basically classes and elements.

So we're just going to do it for the first navigational menu. And inside of the unordered list, we're going to create a div. And this is essentially going to be the container for all the different tab sections and you put a class of tab content. Inside here, we're going to create more divs and each one of these divs is one section within our navigational menu. For this, just put a roll of tab, panel, pre class, tab dash pane. And we're just going to set the first one to active simply because we're going to make it correspond to the first item.

So if you want to didn't want to be active needs to do that, and we're gonna finally put an ID, the ID, we'll just gonna call it Akali one, and that'll get the job done. I'm gonna put the number one here. And the reason we need the ID is because we need to link each one of these items to one of the sections, and we use IDs for that. So I'm going to copy and paste that to save time. I'm going to create three sections you might be thinking, well the for item one, you don't need a section for each item. And the other thing is, this item is disabled.

So we should Be able to click it and go to a section hence why we're not going to have a section for it. So what we're going to do now is save it. Refresh and see Daisy that should not look like that. So I'm clearly missing something. So have a look what we got triggered div of class tab dash count up, put them all as active for us. Not missing, I've got extra stuff.

So if I refresh that, there you go. And if I click on these, you might be thinking while they're working, and like I said, we need to link these items to their corresponding pain. And to do that is really simple. First of all, we need to change the href. So yes, hash, then the actual ID itself and one, two, and three. So if we save that, refresh the browser, I thinking, why isn't he working anymore?

Why isn't it working? at all, yeah. And the reason for that is, we still need to tell each individual list item, or more specifically the H ref element, what type of data it's toggling. So for that input data dash toggle equals tab. So it's just saying, when I clicked this, I'm activating a tab, copy and paste that it doesn't matter whether it's active or not. And obviously, we don't need it for the last one.

So if I go back refresh, right click it. It's not changing. So we need to have a look at why it isn't changing. So data desktop tab, we've got the hash one hash to hash free, which looks all good. So let's just give a quick refresh. Okay, so clearly I am missing some piece of code, data dash toggle equals tab.

I think what I'm missing is a role role equals tab. Copy and paste this. Copy and paste in loads of stuff. So Copy that. Paste, paste, save, refresh. Yeah, it's really weird why it isn't updating.

So let's have a look exactly what we've got. Class tab dash pain, Alex. Okay, active one should be active obviously. div class tab dash content. tab panel. That's the roll.

Yeah, it is looking at Okay, I don't see why wouldn't be working? Well, I'm actually going to do is just try changing the ID to something else I'm going to put profile or both about no change the ID in here as well. Home profile about save that refresh. And now it's working. So it would appear I didn't know this, it would appear that you can't have numbers for the ID and for the H ref. So just bear that in mind is good that put it there.

So we've discovered that so if I just go back refresh the competitors, as you can see on switching between the different sections, and the contents changing not only that the actual tab is being selected as well. Have the opponent do anything with this. Finally, what we're going to show you is how to make the tabs fade in. And because at the moment the very static, so if I go back, click it, they automatically appear. They don't have any animation. You can obviously simulate this with jQuery, or he used some built in classes to do that for the section that is active prop fade and put a class of in every other section is called fade.

Fade, save that refresh. And as you can see the content aka number two, just keep your eye on lists, fading in and out. So once you've got buttons, headings, text, images, that sort of stuff. It looks really, really cool fading in and out. And the next task we want you to essentially implement what we've done with this with the other navigational menus. If you have any questions feel free to post them on sonar learning Dakota UK for slash question dot php.

That's our free education platform. Please rate, comment and subscribe as it really does help us and as usual, thanks for watching and I hope you have a great day.