Hello, in the video, we are going to take a look at collapsible items, so this is great if you have
quite a bit of information and you don't want to show it all at once on screen.
Imagine if you've got a bunch of different sections and depending on what do you the ones they can open
up a particular section.
That's where a collapse comes in.
It's really simple to implement.
So first of all, you want some sort of, you know, button to basically trigger this.
So I'm going to put on a wrap it up in a P tag just so it's blocking every element.
But you can do it however you want to push a button and the cloth doesn't actually matter.
This literally is just for standin in line with the style system in bootstrap, but you could do it
however you want.
This isn't actually a requirement type of what you can do that a hatred for this and you can get more
information about on the Bistrot website.
I will provide a link to this where it shows how to, you know, do a few more X's stuff, including
some detection with JavaScript as well.
So, OK, we are type of bottom.
Then we need to specify a data toggle attribute.
And this is going to be colorful.
Basically what it's doing.
The next we need to have a data target and this is an I.D. of something that we're going to collapse
and, you know, open, we know we haven't created it yet, but I know what I'm going to assign as the
already so hash specifying that you are targeting it using this already is going to put epic collapse.
That's why I'm calling it.
And they're going to put area dash expandable, expanded eco's false.
And then we are going to put area controls and this is going to be epic.
OK, so we don't need to put anything inside the button other than just some no basic tech like show
mall.
And now we're going to actually reload this the page before we get we get the bottom line.
It doesn't do anything right now.
Refresh the actual text editor.
A little mistake.
My never going to actually create the thing that collapses, that opens and closes.
So we're going to put a div into a class of collapse that we have an idea.
And this has to be the same as this right here.
And now we're going to do is, you know, in here, you can pull what you want is literally up to you.
I'm going to use a card that we've already covered in a separate video.
So feel free to check that out card on the card.
Keep it simple, but you can make it more complex.
You put a video in here, an image, text links in here, whatever you want.
And I'm going to put the lorem ipsum text, which is common, the use of placeholder of a placeholder,
I should say, not a placeholder, a placeholder, if I saved up, should be ready to go.
So if I give it a reload click that it opens and closes, it opens and closes it.
That's basically what it is.
Nothing more to it than that.
If, for example, after this I did some random text, this is what looks like and see what happens
if I want to open it, you just moves anything that's below it in the GML structure, even though you
may not be able to see this yet, you just move that down.
So simple.
OK, you can also target multiple items.
So if I was to duplicate this.
And let's say five, put an extra I.D. in the extra I.D. or extra class.
He's there when that happened.
You said blessed, OK, so paced up there and instead of doing a day to that story on an idea, well,
we would do it on a cloth which is docked.
And then the name of the class preload, as you can see, it expands all of them.
And, you know, you technically could have a text in between as well as fine as well.
You know, they don't have to be joined.
And it's as simple as I'm going to send you back to the single day, but that's it.
If you have any questions, feel free to drop me a message.
And as usual, I look forward to seeing you in the next video.