1
00:00:00,210 --> 00:00:06,150
Hey, welcome back in this lesson, we're going to be updating the accordion because in some cases you

2
00:00:06,150 --> 00:00:09,750
might want your accordion to hide all the open panels.

3
00:00:10,020 --> 00:00:14,280
Now, there are a number of ways to do this, and I'm going to present you two different ways to do

4
00:00:14,280 --> 00:00:22,620
this and using the class list to remove all of the active and then also remove the active and toggle

5
00:00:22,620 --> 00:00:25,950
the active on the selected element body.

6
00:00:26,520 --> 00:00:33,420
So the objective of this lesson is to use the query selector and select the element that you want to

7
00:00:33,420 --> 00:00:34,860
remove active from.

8
00:00:35,220 --> 00:00:39,840
So you can pause the video here and I'll walk you through the solution coming up.

9
00:00:40,080 --> 00:00:45,840
So find all the elements with the octave class and remove active from those panels, effectively hiding

10
00:00:45,840 --> 00:00:45,990
them.

11
00:00:50,980 --> 00:00:57,160
We're going to keep this toggle active, but we need to do something before that, and that's selecting

12
00:00:57,160 --> 00:01:02,980
all of the available elements and removing active from any of that might be currently present.

13
00:01:02,990 --> 00:01:09,250
So we don't want to have a scenario where we've got multiple bodies open and we only want to have only

14
00:01:09,250 --> 00:01:10,080
one open.

15
00:01:10,990 --> 00:01:16,960
So in order to limit this, we need to select all of the elements that have the panel.

16
00:01:17,260 --> 00:01:23,920
And we've already done that in accordance where we have that list of all of them already here and available

17
00:01:23,920 --> 00:01:24,820
with an accordion.

18
00:01:25,060 --> 00:01:31,570
I just commented those out so we can clear the console messages and that means that we can take accordion

19
00:01:31,840 --> 00:01:38,410
and loop through each one of the accordions, just as we did before selecting the elements and then

20
00:01:38,410 --> 00:01:39,910
going to use él again.

21
00:01:39,910 --> 00:01:47,750
And then as we move through, we can take the class list of the element and apply a remove.

22
00:01:48,070 --> 00:01:56,950
So the way that remove works is that it will remove active if it's available within the element class

23
00:01:56,950 --> 00:01:57,280
list.

24
00:01:57,460 --> 00:01:59,200
So let's try that and refresh.

25
00:01:59,440 --> 00:02:02,790
So we've got one open, we've got another one open, another one open.

26
00:02:03,040 --> 00:02:05,170
So we're only able to open one at a time.

27
00:02:05,410 --> 00:02:06,880
Now, there is another way to do this.

28
00:02:07,090 --> 00:02:10,360
And personally, I find that this is the easiest way to do this.

29
00:02:11,050 --> 00:02:18,280
There's also if you want to do another query selector, you can do that as well within the toggle element

30
00:02:18,610 --> 00:02:21,350
where we can create another variable.

31
00:02:21,490 --> 00:02:28,390
And this is only going to be within this function where we're selecting all of the ones that have octaves

32
00:02:28,750 --> 00:02:36,340
and then using the document's query selector all we're going to select all of the elements that have

33
00:02:36,340 --> 00:02:40,580
a class of active and all log all of them out.

34
00:02:40,640 --> 00:02:44,980
So this is going to only select if there are other ones that have octaves.

35
00:02:45,310 --> 00:02:47,780
So we see that there were no others that had active.

36
00:02:47,800 --> 00:02:49,960
So the node list is empty now.

37
00:02:49,960 --> 00:02:51,010
We've got another one.

38
00:02:51,010 --> 00:02:54,870
We've got two that have active and now we've got three that have active.

39
00:02:55,150 --> 00:02:56,560
So there's a bunch of them now.

40
00:02:56,560 --> 00:02:57,760
All four have octave.

41
00:02:57,910 --> 00:03:01,510
And that means that once they're selected, we can manipulate them.

42
00:03:01,690 --> 00:03:08,410
And the same idea that we just did there where we did the for each selecting all of the octaves and

43
00:03:08,410 --> 00:03:16,630
using for each, we're going to loop through that node list and select all of the elements contained

44
00:03:16,630 --> 00:03:26,140
within the node list and using the L objects and then classless we can remove active from those.

45
00:03:26,500 --> 00:03:31,990
So same idea, same type of thing, except this time we're using query selector within the function

46
00:03:32,290 --> 00:03:33,700
in order to select the elements.

47
00:03:34,210 --> 00:03:39,820
And as you can see, the effect is going to be the same thing where it's hiding all of those panels

48
00:03:40,060 --> 00:03:44,530
that are open already and in this case that have the class of octave.

49
00:03:44,530 --> 00:03:47,920
So we're looking specifically for that selector.