1
00:00:01,230 --> 00:00:08,700
Hello, in this video, I am going to show you how to implement a collapse of a collapsible component,

2
00:00:08,910 --> 00:00:14,770
but using the accordion style, so feel free to check out the regular Clapp's video.

3
00:00:14,770 --> 00:00:21,010
I highly recommend, even if you are looking to implement an accordion style collapse, still recommend

4
00:00:21,010 --> 00:00:25,980
that you check out the collapse tutorial so you can get an idea of how that works.

5
00:00:26,070 --> 00:00:29,510
This is essentially expanding on that on a theoretical level.

6
00:00:29,520 --> 00:00:31,050
And, you know, code from the code will be.

7
00:00:31,680 --> 00:00:38,370
Well, the accordion style collapse allow you to have you know, I'll just show you right here on this

8
00:00:38,370 --> 00:00:40,260
website, it's like this.

9
00:00:41,070 --> 00:00:46,610
If you open one or any of the one that's open, which is should only be one close with it.

10
00:00:47,010 --> 00:00:48,920
So they are linked to this.

11
00:00:48,930 --> 00:00:53,070
This is pretty simple to get rid of what we've already got.

12
00:00:54,140 --> 00:00:56,740
So we shouldn't have anything left anymore.

13
00:00:57,060 --> 00:01:07,030
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.

14
00:01:07,680 --> 00:01:13,860
We will be using this inside to keep a note of the name EPICA example.

15
00:01:15,060 --> 00:01:18,600
And now we're going to have a card.

16
00:01:20,520 --> 00:01:22,440
And this is the class card.

17
00:01:22,750 --> 00:01:27,760
Again, you can have whatever sort of structure you want in the cards are pretty good for no laying

18
00:01:27,760 --> 00:01:29,180
that information, for example.

19
00:01:29,580 --> 00:01:38,280
And we're going to put a note, Dave, and another class of called DOS.

20
00:01:38,970 --> 00:01:48,900
And this is what you would be clicking on to know you'll be these essentially and you castrilli however

21
00:01:48,900 --> 00:01:49,230
you want.

22
00:01:49,230 --> 00:01:52,970
You provide color totally to different font size style.

23
00:01:53,730 --> 00:01:55,050
You know, it's totally up to you.

24
00:01:55,350 --> 00:02:02,000
The card header can have an I.D. on a card, the symbol of having one book.

25
00:02:02,340 --> 00:02:08,990
Feel free to do something a bit more contextual and know what I'm going to do is inside of here.

26
00:02:09,300 --> 00:02:16,300
You can format this however you want, but I'm going to format the Hajj to I'm to the class of entry.

27
00:02:16,350 --> 00:02:17,720
That's zero.

28
00:02:17,730 --> 00:02:24,600
So this is zero margin up the bottom and we're going to have a button, which is that you click to open

29
00:02:24,600 --> 00:02:26,880
and close a particular section.

30
00:02:26,880 --> 00:02:33,330
So button class, feel free to style this button if you want.

31
00:02:34,080 --> 00:02:39,590
It is totally up to you to fix this.

32
00:02:39,600 --> 00:02:53,550
Last time you call what data does toggle you call class data.

33
00:02:53,960 --> 00:03:03,360
That's all get because and this is going to be called collapse one, which is the main body.

34
00:03:03,660 --> 00:03:08,430
We have not created that yet, but we will be creating that in the next minute or so.

35
00:03:08,430 --> 00:03:16,770
Area does X and it goes through.

36
00:03:18,630 --> 00:03:28,440
So we will have one expanded by default area that rolls equals

37
00:03:34,410 --> 00:03:35,010
one.

38
00:03:35,370 --> 00:03:37,560
And that was the aftermath.

39
00:03:38,700 --> 00:03:44,100
I'm simply going to put in here item one, you know, just keep it simple.

40
00:03:44,550 --> 00:03:51,380
And then outside of the header we're going to have the main body, which, you know, hides and closed

41
00:03:51,390 --> 00:03:56,640
loop, and it's going to have an idea of collapse, one, which is what we use Roitfeld.

42
00:03:56,640 --> 00:04:03,480
Make sure you you put the correct these very important that can prevent you from working.

43
00:04:03,510 --> 00:04:04,410
I've done that before.

44
00:04:04,410 --> 00:04:05,430
It happened to all of us.

45
00:04:05,700 --> 00:04:09,930
Collapse show this is, you know, should look very familiar.

46
00:04:10,440 --> 00:04:15,510
We really should from the collapse video labeled

47
00:04:17,730 --> 00:04:20,970
area code by.

48
00:04:24,130 --> 00:04:24,640
Erica.

49
00:04:28,330 --> 00:04:32,950
Having one, which is what we name this right here.

50
00:04:36,240 --> 00:04:37,230
Another data.

51
00:04:38,710 --> 00:04:51,010
Does parent, because it is literally this epic example, because it's an idea perhaps, and now it's

52
00:04:51,010 --> 00:04:52,390
going to put some content in there

53
00:04:55,510 --> 00:05:02,760
with a keyboard, I'm going to give a class of called today.

54
00:05:03,940 --> 00:05:09,700
And in here I'm going to get this law ipsum text.

55
00:05:09,700 --> 00:05:15,320
You can put whatever you want to now save the refresh.

56
00:05:16,450 --> 00:05:22,390
So at the moment we don't have any other items, so we need to create them and the best way to actually

57
00:05:22,390 --> 00:05:25,730
create them is literally just to duplicate the card.

58
00:05:26,080 --> 00:05:32,350
So this card right here, if you duplicate this now, I want to create this or implement it.

59
00:05:32,540 --> 00:05:39,430
So a total of three we can do as many of you want, the few changes that you need to make in all subsequent

60
00:05:39,430 --> 00:05:39,940
cards.

61
00:05:40,250 --> 00:05:47,870
You need to change the this I.D. to do two, you need to change and heading.

62
00:05:48,430 --> 00:05:53,090
You want to know?

63
00:05:53,320 --> 00:05:59,090
I didn't want to change it then I wanted to change here to make sure you label it properly.

64
00:05:59,140 --> 00:06:00,310
Heading to.

65
00:06:00,640 --> 00:06:01,270
I should do that.

66
00:06:01,340 --> 00:06:03,850
There you keep that already the same.

67
00:06:04,090 --> 00:06:05,950
This should now be code.

68
00:06:07,250 --> 00:06:17,750
Or thought they should be targeting collapse two to and collapse to

69
00:06:20,210 --> 00:06:23,030
and waste has expanded.

70
00:06:23,060 --> 00:06:26,180
We want all others to be fulfilled.

71
00:06:26,450 --> 00:06:35,900
They are clothed, so we only have one open by default, setting free, easy way to remember based on

72
00:06:35,900 --> 00:06:39,260
the name system you've done, just got one, two, three, four.

73
00:06:39,260 --> 00:06:53,030
Everything that we've put a pretty easy way to and to be fair, heading to carry care in that report

74
00:06:53,030 --> 00:06:54,020
from Eric.

75
00:06:54,470 --> 00:06:56,800
Did you want to be false?

76
00:06:58,040 --> 00:07:02,730
Reload and OK, we also want to change this to three.

77
00:07:06,320 --> 00:07:08,960
OK, I should.

78
00:07:09,010 --> 00:07:10,790
We actually said so yet.

79
00:07:10,790 --> 00:07:11,360
They are.

80
00:07:11,570 --> 00:07:12,680
They are all.

81
00:07:13,620 --> 00:07:16,260
Showing, which is not what we wanted.

82
00:07:16,860 --> 00:07:18,870
They also.

83
00:07:20,760 --> 00:07:22,460
And was.

84
00:07:25,140 --> 00:07:34,190
Was to use or need to add on the button itself to another class, we need to add it's only on the ones

85
00:07:34,190 --> 00:07:35,200
that are collapsed.

86
00:07:35,210 --> 00:07:41,180
It should be on the last class.

87
00:07:44,260 --> 00:07:49,720
Now, it's so easy to miss something off of that refresh

88
00:07:52,220 --> 00:08:04,250
case and still got a bit to go to see if we are so beaten and beaten in mink Platek left collapsed.

89
00:08:05,170 --> 00:08:06,510
OK, so far, so good.

90
00:08:06,810 --> 00:08:16,910
Bottom data, Tuggle is all there should be a location and a wire uppercase to.

91
00:08:25,260 --> 00:08:27,060
Israel will still show in.

92
00:08:32,910 --> 00:08:39,240
Also, we've got a show on the first one we do not want on the other.

93
00:08:41,680 --> 00:08:43,730
Have a good feeling about this refresh.

94
00:08:44,020 --> 00:08:45,540
Yeah, let's see if it works.

95
00:08:50,130 --> 00:08:56,510
OK, so I fully work, so I'm going to go get something to do with the target.

96
00:08:57,390 --> 00:08:59,770
So, look, the heading to.

97
00:09:00,970 --> 00:09:06,270
Clubs to clubs, to clubs, to having to go down here.

98
00:09:07,980 --> 00:09:22,350
Plus, Rick Perry heading for a that should be very free reload, and they all look good now.

99
00:09:22,980 --> 00:09:23,910
Yes.

100
00:09:24,440 --> 00:09:26,450
And they are all working fantastic.

101
00:09:26,850 --> 00:09:32,340
So that is how you implement an accordion style clap system.

102
00:09:32,550 --> 00:09:35,340
If you have any questions, feel free to pour me a message.

103
00:09:35,490 --> 00:09:41,760
You can messaged me on this discord among websites, on the learning, on a bunch of the different ways,

104
00:09:41,850 --> 00:09:43,860
all of which is in the description.

105
00:09:44,610 --> 00:09:47,100
The guitar blink will also be in the description.

106
00:09:47,310 --> 00:09:52,380
So you can check out the source code because there is a fair bit here and that's it.

107
00:09:52,410 --> 00:09:54,930
I look forward to seeing you in the next awesome video.