Hello in this bootstrap four video, we're going to show you accordion collapsible content, accordion collapsible content like to have, essentially collapsible content on top of each other, they can be placed anywhere you want. And if you open one, it collapses any of the ones that are open within the accordion group. And if you open ANOVA, it does the same. It's really, really cool. And it really does look amazing, especially if you're creating some sort of website that has a lot of information, maybe a lot of forms, and you only want to display the information that the user needs at that particular time. So to do this, you need a div and the first div is going to be a container for all of the different sections.

This needs a class of accordion needs a role. Its role is tab list is area, dash multi select Whoa, that looks a okay the spelling those put that to true. Inside here we have panels. Each panel is the button itself that activates that particular collapsible content and the collapsible content as well. So it's going to do a div we've covered panel before so check that video out if you want more information for a class of panel, panel dash D fault. Then inside here, gonna have a nova div.

And this div has a class of panel dash, heading row equals tab. All IE d equals on the heading one and then inside here, we're seeing gonna have a haich D for. For this, this is a class of panel total. Technically we use something else other than panels. You don't have to be quite the same way that we're doing it but it's just looks really simple and really cool using panels. And inside here we're gonna add a data dash toggle, equals equals collapse.

Data, dash parent equals, actually, sorry, this needs to be an ID not a class in my bad. I'm just gonna capitalize it. So we're just gonna copy and paste that that goes in the data, parent attribute. Do we need a h ref And this href is simply going to be called laughs one or whatever the collapsible content is called. We haven't programmed our in yet. We'll do that in a moment.

Now we need area dash expanded, I'm gonna set this to true, that just means this particular content is open by default, you can set it to false. If you don't want to open by default readings, it's change. Area dash controls, equals co laps, one. Again, you want it the same as the H ref. And now inside here, it's gonna have some text. collapsible group, oil term, one outside of the house For the panel heading, they've got still within the panel, you want to add another div.

And this div has an ID, which is the same as this right here. He has a class of panel dash collapse, collapse in, you only want this in for the collapsible item that's open by default. So if you don't want it open by default, which we'll show you in a moment, by having multiple sections, you want to omit this little class right here. That will be showing that soon. You're gonna put a roll of tab panel and you want to do area dash labeled boy equals. For this we're going to put heading one which is right here.

And now inside was going to put some people by images from a text. Let's compare a random paragraph which I'm going to get from a random paragraph generator. Copy and paste that. Before we add more panels, we're simply going to show you this work in as it is. So refresh. regarding a collapsible item, it's open by default, because remember I have I had the class and the area dash, or the chord, minor area dash expanded set true, but if I click this, as you can see in there closes and opens, very similar to regular collapsible content.

But here comes the accordion part. So let's just simply copy and paste this code we only need to change a few things. So we want to change the ID and put this to Heading Two. You won't need a class for the href collapse Sophie's collapsed by default, you want to change this to collapsed, it's going to change the H ref, we don't need to trigger the first one, area dash expanded is equal to false areas as controls is collapse. To change this to group item two changes to class two got to get rid of this in, change this to collapse two. And now we are going to scan no random paragraph just so it looks different.

Copy that. Paste. And now what we're going to do just create one more, can have as many as you want. You can just have one two was going to have frequently in looks quite cool when the three of them go down. See what we need really, we only need to change the head industry or the head into and the collapse to to free. Simply, we've done all the other changes, China's free, free, free and free.

So let's simply get another paragraph, copy and paste that. Go back to our browser refresh. As you can see, we got two more group item buttons, they all collapse by default. If I click on this one, still open and close it, but if this is open, and I click number three, for example. Okay, that didn't quite work because it's not closing the other content. So let's have a look what we missed.

Clearly, on our list, right here, I'll put data dash parent accordion, it needs a hash because it doesn't No, I'm referencing an ID. So if I just put a hash in all the data parents was a load or mistake on my part. So if you picked up on that great if you didn't just add a quick hash, save it refresh. So if I click on group item three, as it sees the other one closes, I can't have more than one open at any given time. You might be wondering what happens if, let's say they're all close. So if I close this one, and I click open on another one, doesn't open any of the others or close any of the others because they're already closed.

Bootstrap handles all of that for you. And it just opens and closes the one that you need. So that's accordion, collapsible content. Really, really cool, really useful. If you have any questions, 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. Plus, there'll be another link to source code from This video, please rate, comment and subscribe as it really does help let us know 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.