1
00:00:00,180 --> 00:00:04,770
Hello and welcome back in this lesson, we're going to finish off our project, so this is our accordion

2
00:00:04,770 --> 00:00:06,330
project that we've been working on.

3
00:00:06,450 --> 00:00:12,600
When we click the elements, we see that it opens up the box of content, but when we click it again,

4
00:00:12,600 --> 00:00:13,380
it closes it.

5
00:00:13,500 --> 00:00:17,910
But we see that we've got multiple ones that are opening up and sometimes you might actually want this

6
00:00:17,910 --> 00:00:18,270
effect.

7
00:00:18,300 --> 00:00:20,820
So then at that point you are actually completed.

8
00:00:21,060 --> 00:00:24,930
But if you want them to close up and only want to have one of the boxes open.

9
00:00:24,930 --> 00:00:28,680
So that's typical within accordion's, you've got to remove the octave class.

10
00:00:28,920 --> 00:00:30,890
And there's a number of different ways to do this.

11
00:00:31,110 --> 00:00:36,810
You could select all use square selector and select all the elements of the class of active and then

12
00:00:36,810 --> 00:00:40,350
iterate through them and simply remove out that class of active.

13
00:00:40,680 --> 00:00:46,980
Or since we already have our common element object, we can make use of that and we can use that within

14
00:00:46,980 --> 00:00:47,560
a function.

15
00:00:47,820 --> 00:00:51,990
So setting up and we can call it like clear, active or something like that.

16
00:00:52,260 --> 00:00:59,610
And what this function will do whenever it runs, it can loop through all the elements that have a class

17
00:00:59,610 --> 00:01:00,660
of content.

18
00:01:00,660 --> 00:01:04,890
And I'll check to see if they've got the class of active as well.

19
00:01:05,070 --> 00:01:08,060
And if it does, then we can simply remove out that class.

20
00:01:08,070 --> 00:01:10,320
So that's a quick and easy way to do that.

21
00:01:10,320 --> 00:01:13,680
So I'm going to simply go through I'm going to update this instead of mean.

22
00:01:13,680 --> 00:01:18,390
This would now be corne, so looping through all of the elements with the class of corn.

23
00:01:18,390 --> 00:01:22,740
And we're going to simply select the whatever the octave element is.

24
00:01:22,740 --> 00:01:30,600
So corn elex and using the same format, using classless and then remove and simply remove that class

25
00:01:30,600 --> 00:01:31,340
of active.

26
00:01:31,350 --> 00:01:33,690
And if it doesn't have it there, nothing will happen.

27
00:01:33,840 --> 00:01:36,590
But if it does have a class of active it will remove it.

28
00:01:36,600 --> 00:01:42,870
And so now all we have to do is add this function here before we toggle and add the active one.

29
00:01:42,870 --> 00:01:47,460
And you can see that now whenever I click it, it shuts the other ones down.

30
00:01:47,460 --> 00:01:53,070
So it removes the octave class from those existing ones and only shows the ones that I'm currently looking

31
00:01:53,070 --> 00:01:53,310
at.

32
00:01:53,400 --> 00:01:56,340
So that was a quick and easy way to create an accordion.

33
00:01:56,350 --> 00:01:58,650
And I hope you had an opportunity to try that out for yourself.

34
00:01:58,670 --> 00:02:00,570
Well, I had an experiment to try the code out.

35
00:02:00,720 --> 00:02:02,340
The code is also included.

36
00:02:02,340 --> 00:02:05,370
And if you have any questions or comments, please feel free to ask.

37
00:02:05,670 --> 00:02:07,620
Thanks again for taking the section.

38
00:02:07,620 --> 00:02:09,450
I'll do a quick run through of the code as well.

39
00:02:09,750 --> 00:02:15,780
So with the JavaScript, so we structured our HTML having one element and then the next sibling was

40
00:02:15,780 --> 00:02:16,470
the content.

41
00:02:16,680 --> 00:02:20,610
And you do need to keep that format in order to use the next sibling method.

42
00:02:20,940 --> 00:02:25,710
And then we selected all of the elements into our JavaScript objects.

43
00:02:25,950 --> 00:02:30,270
We loop through the first one, the main elements and added event listeners.

44
00:02:30,270 --> 00:02:32,280
So that added the ability to click those.

45
00:02:32,580 --> 00:02:35,730
And once they got clicked, we ran a block of code.

46
00:02:35,910 --> 00:02:41,970
So the first part of the code cleared out any of the active ones and the second one added in that octave

47
00:02:41,970 --> 00:02:42,570
toggle one.

48
00:02:42,780 --> 00:02:48,000
So we could actually change that to remove if we want it to now, because now it's simply removing all

49
00:02:48,000 --> 00:02:50,190
of the actives there that are available.

50
00:02:50,190 --> 00:02:53,790
So we could simply have this to add and it's going to be doing the same thing.

51
00:02:53,790 --> 00:02:55,110
So it's not shutting anymore.

52
00:02:55,230 --> 00:02:57,270
And that was the difference in what the toggle is doing.

53
00:02:57,450 --> 00:03:02,640
And then what we did here with Clear Active, we created a function that will loop through iterate through

54
00:03:02,640 --> 00:03:07,170
all of the elements with the class of content and simply remove out active.