Hello, in this video, I am going to show you how to implement a collapse of a collapsible component,
but using the accordion style, so feel free to check out the regular Clapp's video.
I highly recommend, even if you are looking to implement an accordion style collapse, still recommend
that you check out the collapse tutorial so you can get an idea of how that works.
This is essentially expanding on that on a theoretical level.
And, you know, code from the code will be.
Well, the accordion style collapse allow you to have you know, I'll just show you right here on this
website, it's like this.
If you open one or any of the one that's open, which is should only be one close with it.
So they are linked to this.
This is pretty simple to get rid of what we've already got.
So we shouldn't have anything left anymore.
The first thing that you want to do is put a Dave and a class of Odean and we're going to have an idea.
We will be using this inside to keep a note of the name EPICA example.
And now we're going to have a card.
And this is the class card.
Again, you can have whatever sort of structure you want in the cards are pretty good for no laying
that information, for example.
And we're going to put a note, Dave, and another class of called DOS.
And this is what you would be clicking on to know you'll be these essentially and you castrilli however
you want.
You provide color totally to different font size style.
You know, it's totally up to you.
The card header can have an I.D. on a card, the symbol of having one book.
Feel free to do something a bit more contextual and know what I'm going to do is inside of here.
You can format this however you want, but I'm going to format the Hajj to I'm to the class of entry.
That's zero.
So this is zero margin up the bottom and we're going to have a button, which is that you click to open
and close a particular section.
So button class, feel free to style this button if you want.
It is totally up to you to fix this.
Last time you call what data does toggle you call class data.
That's all get because and this is going to be called collapse one, which is the main body.
We have not created that yet, but we will be creating that in the next minute or so.
Area does X and it goes through.
So we will have one expanded by default area that rolls equals
one.
And that was the aftermath.
I'm simply going to put in here item one, you know, just keep it simple.
And then outside of the header we're going to have the main body, which, you know, hides and closed
loop, and it's going to have an idea of collapse, one, which is what we use Roitfeld.
Make sure you you put the correct these very important that can prevent you from working.
I've done that before.
It happened to all of us.
Collapse show this is, you know, should look very familiar.
We really should from the collapse video labeled
area code by.
Erica.
Having one, which is what we name this right here.
Another data.
Does parent, because it is literally this epic example, because it's an idea perhaps, and now it's
going to put some content in there
with a keyboard, I'm going to give a class of called today.
And in here I'm going to get this law ipsum text.
You can put whatever you want to now save the refresh.
So at the moment we don't have any other items, so we need to create them and the best way to actually
create them is literally just to duplicate the card.
So this card right here, if you duplicate this now, I want to create this or implement it.
So a total of three we can do as many of you want, the few changes that you need to make in all subsequent
cards.
You need to change the this I.D. to do two, you need to change and heading.
You want to know?
I didn't want to change it then I wanted to change here to make sure you label it properly.
Heading to.
I should do that.
There you keep that already the same.
This should now be code.
Or thought they should be targeting collapse two to and collapse to
and waste has expanded.
We want all others to be fulfilled.
They are clothed, so we only have one open by default, setting free, easy way to remember based on
the name system you've done, just got one, two, three, four.
Everything that we've put a pretty easy way to and to be fair, heading to carry care in that report
from Eric.
Did you want to be false?
Reload and OK, we also want to change this to three.
OK, I should.
We actually said so yet.
They are.
They are all.
Showing, which is not what we wanted.
They also.
And was.
Was to use or need to add on the button itself to another class, we need to add it's only on the ones
that are collapsed.
It should be on the last class.
Now, it's so easy to miss something off of that refresh
case and still got a bit to go to see if we are so beaten and beaten in mink Platek left collapsed.
OK, so far, so good.
Bottom data, Tuggle is all there should be a location and a wire uppercase to.
Israel will still show in.
Also, we've got a show on the first one we do not want on the other.
Have a good feeling about this refresh.
Yeah, let's see if it works.
OK, so I fully work, so I'm going to go get something to do with the target.
So, look, the heading to.
Clubs to clubs, to clubs, to having to go down here.
Plus, Rick Perry heading for a that should be very free reload, and they all look good now.
Yes.
And they are all working fantastic.
So that is how you implement an accordion style clap system.
If you have any questions, feel free to pour me a message.
You can messaged me on this discord among websites, on the learning, on a bunch of the different ways,
all of which is in the description.
The guitar blink will also be in the description.
So you can check out the source code because there is a fair bit here and that's it.
I look forward to seeing you in the next awesome video.