Hello, in this bootstrap four video, we're going to show you collapsible content in bootstrap, it's really cool allows you to hide some content, let's say click a button and it opens the content. And obviously it closes as well when you click the button again, do it, it's really simple. First of all, you want to actually create something that is gonna be interruptible. So we're going to use a button we can use another element if you wanted to, you can use an H ref really is whatever you want. So let's quickly get this button created. Type button we have separate videos called rain button.

So check them out for more information on that and what is going on here. Because we're not really going to be covering buttons in this video. So you need a data dash toggle collapse. So this is crucial for whatever else You're using data to target another crucial attribute. And for this, you simply want to put the ID of your collapsible content. I'm just going to put collapse, Id keep it really simple.

Area, dash expanded. A spell expanded correctly, equals false. Area dash controls. Area dash controls. Equals for this is going to be the same as the collateral ID, but without the hash. And then inside the button, we're simply going to put some text I'm gonna say, click me, please.

Below the button. We are going to put our collapsible content. So we're going to put div the div needs a class. Have collapse an ID, which is the data dash target that we've set. Out here, we need a nother div. And this div has a class of cord.

Actually, technically, you don't need this div, I'm just putting this divs on creating basically a card to display some text. Now Actually, I want to keep it simple. I'm not going to put anything in here, apart from some raw text, you can put whatever you want inside the class. Once you have this div set up, you're good to go. So I'm basically it's going to go to Google get a random paragraph. So random paragraph generator.

I do use this website a lot. So did it. Yeah, that looks okay to me. Copy that in. Refresh the webpage. We've got a button in my thinking where the text by default the The collapsible content is hidden.

It's all handled behind the scenes. So if I click that, as you can see it now appears click click it again and it disappears and it's got a really cool animation to it. So that's collapsible content. If you have any questions feel free to post them on our education platform sonar learning Dakota UK for slash question dot php. There will be a link in the description to that along with the source code from this video. There will be another video covering accordion, collapsible content, check that out.

Please rate, comment and subscribe as it really does help us understand what you like and what you don't like about our videos. And as usual, thank you for watching and I hope you have a great day.