Hello, in this bootstrap four video, we're going to show you collapsible content. At the moment, we have a great looking navbar. But what we can do is make it hidden by default and have a menu button, which opens it. So it's collapsible, you can open and close it. To do that it's really simple. First of all, with your NAB, this needs to add a class of collapse.
They need to add an ID, so our button knows what item is triggering. So for this, I'm simply going to put now one probably want to name me a lot better than that. And that's it in terms of the coding for the nav bar. Now we just need to just create the button. What I'm going to do is creating Nova nav, so class equals nav bar, nav bar, dash like yummy To do this, you can just create the button that I'm going to put inside it. The reason I'm actually doing this is because it looks more professional and how it generally would look on a website.
So we've got the navbar set up inside, it's going to put a button so class of button. And you can either turn to Me nav bought toggle toggler, sorry, type equal, but turn data dash toggle. So what sort of data are we toggling? It collapse is a collapsible piece of item. Now we need to put data targets or data target, and this is the ID that we set right here. So just copy and paste up and inside, we're just going to put ampersand hash 97767 Cola, and you'll see what this looks like.
You might think, Oh, this looks crazy. But when you see the visual implication of what we've just done, you'll love it. So first, open up the web browser refresh. There you go. We've got our new navbar with our menu button. You've probably seen this before I guarantee if you're here coding, you must have seen this on application websites, etc.
Most miles me thinking, where's the navbar? Gone? Again, it's collapsible, it's hidden. So if we click on that, okay, clearly didn't work. So let's go back and have a look where we've messed up where I've messed up basically, so so so so we have a navbar. We have an ID or not On your data dash, target.
Now one, there we go, we need to put a hash on there. Because by default, it doesn't know that you're targeting and ID. So if we refresh, click it now, and as you can see, it opens. And when I click it closes, and as you can see, it's also very cool animation. So it's just sliding instead of just suddenly and abruptly appearing. So that's collapsible content with your navbar.
If you have any questions on this or anything else, feel free to post them on our education platform sonar learning Dakota, UK for slash question dot php, there'll be a link in the description. There'll be another link in the description to the source code from this video. Please rate, comment, and subscribe and let us know what you think of this video. And as usual, thank you for watching, and I hope you have a great day.