1
00:00:00,210 --> 00:00:04,920
This lesson, we're going to look at the element class list, and this is a read only property that

2
00:00:04,920 --> 00:00:11,340
returns all of the collection of the class attributes for the element, and it can be used to manipulate

3
00:00:11,340 --> 00:00:12,150
the class list.

4
00:00:12,360 --> 00:00:18,120
And this is where all of the functionality for the accordion is going to take place, where we're going

5
00:00:18,120 --> 00:00:26,700
to use this to select the active object that got clicked and then class list in order to select the

6
00:00:26,880 --> 00:00:31,590
active class list for the element and then apply a method of toggle.

7
00:00:31,770 --> 00:00:36,240
There's also add and remove if we want to add or remove a specific class.

8
00:00:36,520 --> 00:00:43,050
And in this case, what we want to do is toggle the octave class on that element in order to show and

9
00:00:43,050 --> 00:00:45,870
hide the content that's contained within the body.

10
00:00:46,360 --> 00:00:51,780
And what this means is that clicking the head is going to open and then clicking it again is going to

11
00:00:51,780 --> 00:00:54,300
close and it's playing the class list.

12
00:00:54,630 --> 00:01:02,370
So you can pause the video here and practice selecting and updating the class list with toggle.

13
00:01:02,580 --> 00:01:07,040
And also you can check out, add and remove and I'll walk you through the solution coming up.

14
00:01:12,070 --> 00:01:16,700
If you do need additional information, there is more information about classlessness available.

15
00:01:16,720 --> 00:01:22,990
The Mozilla Developer Network, that gives you some examples of how closely it works and it's got a

16
00:01:22,990 --> 00:01:24,510
ton of examples for this one.

17
00:01:24,880 --> 00:01:26,910
So we've got creating an element here.

18
00:01:26,920 --> 00:01:31,660
So selecting the element class list so you can remove the class foo.

19
00:01:31,930 --> 00:01:35,500
And in this case, what they did is they created the elements.

20
00:01:35,500 --> 00:01:42,130
They set the class name to FU and then they removed the class name of Fu from the element and then added

21
00:01:42,130 --> 00:01:42,730
another one.

22
00:01:42,910 --> 00:01:46,480
So they're using the add and remove methods and class list.

23
00:01:46,600 --> 00:01:54,610
And the one that we want to use is toggle because toggle will add if it's not there and remove if it's

24
00:01:54,610 --> 00:01:54,970
there.

25
00:01:55,000 --> 00:01:57,190
And that's exactly what we want to happen.

26
00:01:57,430 --> 00:02:04,780
Whenever we click the head section, there's also replace so you can actually replace an existing class

27
00:02:04,780 --> 00:02:05,980
with another class name.

28
00:02:06,250 --> 00:02:10,000
And that's also a useful functionality that's now going into the ED.

29
00:02:10,000 --> 00:02:16,330
We already have the event listener applied and we can also get rid of some of this console stuff here

30
00:02:16,570 --> 00:02:18,400
and we can get rid of all of the console.

31
00:02:18,790 --> 00:02:25,870
And we're going to select the active element with this and use the class list method and then toggle

32
00:02:26,290 --> 00:02:31,000
and toggle the class name of active to the element.

33
00:02:31,160 --> 00:02:32,590
And these are all classes.

34
00:02:32,770 --> 00:02:35,470
So so we don't have to put the dot in front of the class name.

35
00:02:35,950 --> 00:02:44,470
And one other thing we need to do is we need to set the default to be display none and that automatically

36
00:02:44,470 --> 00:02:46,000
hides all the body content.

37
00:02:46,450 --> 00:02:47,710
So we're ready to try this.

38
00:02:48,160 --> 00:02:52,060
And going back into the project, let's do a quick refresh and a clear.

39
00:02:52,210 --> 00:02:57,120
So whenever we click the head, it will hide, it will show hide, shall hide.

40
00:02:57,130 --> 00:02:59,530
So so everything works as expected.

41
00:02:59,950 --> 00:03:04,990
And in some cases with the accordion, you might want all of the body content to close.

42
00:03:05,140 --> 00:03:08,320
So you only might want to have only one of the body elements open.

43
00:03:08,710 --> 00:03:10,660
And I'll show you how to do that coming up.

44
00:03:10,840 --> 00:03:15,730
And the nice thing about it is if you want to add additional panels, it's really easy to do.

45
00:03:16,360 --> 00:03:21,910
You can just simply add another panel and it's going to function just as the other previous panels.

46
00:03:22,210 --> 00:03:24,400
So you don't have to do any additional coding.

47
00:03:24,610 --> 00:03:31,900
If you update your accordion, it's going to function exactly as before and exactly as the other elements

48
00:03:31,900 --> 00:03:32,110
do.

49
00:03:32,260 --> 00:03:33,990
Try to add an additional panel.