1
00:00:00,330 --> 00:00:05,760
I know what you're thinking, you've come for the JavaScript, not the HTML, and I do promise you no

2
00:00:05,760 --> 00:00:09,220
more HTML, just JavaScript from now on in the section.

3
00:00:09,570 --> 00:00:12,600
So next, what we need to do is select our elements.

4
00:00:12,810 --> 00:00:14,700
We created the elements in the last lesson.

5
00:00:14,850 --> 00:00:20,700
Let's create an element object in JavaScript so that we can utilize the element information within our

6
00:00:20,700 --> 00:00:21,210
script.

7
00:00:21,420 --> 00:00:25,410
So we're selecting all of the elements that have a class of mean.

8
00:00:25,680 --> 00:00:35,280
So selecting the main element and we can use document and because there's many of them using query selector

9
00:00:35,280 --> 00:00:36,790
also to select all of them.

10
00:00:37,200 --> 00:00:43,110
So this will give us a node list with all of the elements that have the class of mean and we're going

11
00:00:43,110 --> 00:00:45,240
to do the same thing for the content.

12
00:00:45,450 --> 00:00:52,290
So our content element using document, the same format, the query selector all selecting all of the

13
00:00:52,290 --> 00:00:54,650
elements with a class of content.

14
00:00:54,960 --> 00:00:57,510
So that will give us two objects in JavaScript.

15
00:00:57,750 --> 00:00:59,040
So we refresh the page.

16
00:00:59,040 --> 00:01:01,410
You don't see anything different because of course it's JavaScript.

17
00:01:01,650 --> 00:01:07,110
But when I output that in the console, you can see I've got a node list selecting all of the relevant

18
00:01:07,110 --> 00:01:08,700
elements that had that class.

19
00:01:08,940 --> 00:01:13,710
And you could also test it out with Corne Element to make sure that you've got the node list.

20
00:01:13,830 --> 00:01:18,690
And once you have this and if you can type it in the console, then you're ready to make use of those

21
00:01:18,690 --> 00:01:21,430
objects that you've selected those elements into.

22
00:01:21,480 --> 00:01:26,700
So next thing that we need to do is apply some type of action, some type of event listener, because

23
00:01:26,700 --> 00:01:30,270
we know what an accordion you click it and something happens.

24
00:01:30,300 --> 00:01:33,680
So that's the whole idea is that we want to be able to click these elements.

25
00:01:33,680 --> 00:01:35,220
So we also want to make them clickable.

26
00:01:35,400 --> 00:01:42,780
So I do want to add in into the I do want to add into the cursor so I know I'm going to make this really

27
00:01:42,780 --> 00:01:49,320
quick and set it as a pointer so that whenever we do go over them, that we get the little hand pointer

28
00:01:49,320 --> 00:01:52,530
so that we know that or the user knows that this is clickable.

29
00:01:52,920 --> 00:02:00,300
Let's use a for loop setting up our for loop with a variable of X and we're going to loop through while

30
00:02:00,660 --> 00:02:04,710
X is less than the main elements length.

31
00:02:04,710 --> 00:02:05,910
And this is a node list.

32
00:02:05,910 --> 00:02:10,950
So it has a link that behaves the same way as an array and then we can increment it X.

33
00:02:11,340 --> 00:02:14,100
So this is going to allow us to loop through all of the elements.

34
00:02:14,430 --> 00:02:19,560
And if you want to check that, it's always a good idea to check it along the way just to make sure

35
00:02:19,560 --> 00:02:21,360
that you are getting the elements properly.

36
00:02:21,540 --> 00:02:25,460
So now when I refresh it, you see that we're listing out all of those elements.

37
00:02:25,650 --> 00:02:29,060
So these are corresponding with the elements, with the class of main.

38
00:02:29,220 --> 00:02:35,340
So we're good to go to the next step where we're going to play an action to it so we can add an event

39
00:02:35,340 --> 00:02:41,370
listener to the element by selecting that main element that is active within the list.

40
00:02:41,670 --> 00:02:43,920
And then we can add event listeners to it.

41
00:02:44,280 --> 00:02:46,470
We can specify the event that we're listening for.

42
00:02:46,470 --> 00:02:47,970
So we're listening for a click.

43
00:02:48,270 --> 00:02:52,680
And then what we want to do whenever it gets clicked, we're going to create an anonymous function and

44
00:02:52,680 --> 00:02:57,710
have that run, taking our action, running the block of code whenever it gets clicked.

45
00:02:57,900 --> 00:03:01,080
So what do we want to do with this element once it gets clicked?

46
00:03:01,320 --> 00:03:04,650
And if you want to test it, you can always test that element.

47
00:03:04,980 --> 00:03:08,070
You can output this or whatever you want to output.

48
00:03:08,250 --> 00:03:10,800
And you can see it's outputting that element information.

49
00:03:11,280 --> 00:03:13,880
You could also use the element objects.

50
00:03:13,890 --> 00:03:15,840
It's going to output that same thing.

51
00:03:16,020 --> 00:03:19,020
And you can see it's outputting the same thing when it gets clicked.

52
00:03:19,350 --> 00:03:22,470
And I'm going to actually get rid of this console message because we don't need it.

53
00:03:22,770 --> 00:03:27,510
And as you can see now, whenever I click it, we're outputting that element object.

54
00:03:27,690 --> 00:03:33,720
So this and the main element are going to be the same because we are looping through it and they are

55
00:03:33,720 --> 00:03:36,260
representing the same element object.

56
00:03:36,270 --> 00:03:41,430
So what we want to do is we want to select the next sibling and the next sibling.

57
00:03:41,430 --> 00:03:47,190
And as we look into our structure, we see that we've got another element that's got content and that's

58
00:03:47,190 --> 00:03:47,970
right next to it.

59
00:03:48,210 --> 00:03:49,770
So that's the next sibling.

60
00:03:49,920 --> 00:03:54,540
And we're going to use JavaScript method called next element sibling.

61
00:03:54,550 --> 00:03:56,880
So it returns the element immediately after it.

62
00:03:57,120 --> 00:03:58,030
So see what happens.

63
00:03:58,050 --> 00:04:02,520
So now when we click it, we see we get the element and this is the one that's got all of the content

64
00:04:02,520 --> 00:04:02,760
in it.

65
00:04:03,060 --> 00:04:06,630
And as you click the different ones, you get the different elements, siblings.

66
00:04:06,930 --> 00:04:11,670
And that's actually exactly what we want to happen, because these are the ones that we want to apply

67
00:04:11,670 --> 00:04:13,000
the active class to.

68
00:04:13,590 --> 00:04:20,970
So now that we are able to select that element, we can apply the octave class to it.

69
00:04:21,600 --> 00:04:23,850
Let's go ahead and we're going to do that.

70
00:04:23,850 --> 00:04:32,250
And so we're taking the main elements X and selecting the next element sibling and then taking our class

71
00:04:32,250 --> 00:04:32,820
list.

72
00:04:33,150 --> 00:04:39,810
And we're going to toggle the class of active to it and double quote the so it can be single or double

73
00:04:39,810 --> 00:04:40,110
quotes.

74
00:04:40,110 --> 00:04:42,510
It doesn't actually matter and it's getting a little bit long.

75
00:04:42,510 --> 00:04:45,870
So let me move that over and I'm going to move this one over as well.

76
00:04:46,050 --> 00:04:46,920
Will refresh.

77
00:04:47,070 --> 00:04:51,510
And you can see that when I click them, they open up now with an accordion.

78
00:04:51,510 --> 00:04:56,880
What typically happens is when you open up one, it closes the rest of them.

79
00:04:56,880 --> 00:04:58,020
So that's what we want to happen.

80
00:04:58,020 --> 00:04:59,730
We want to be able to close off.

81
00:04:59,870 --> 00:05:05,360
The rest of them, and when we do click it again, we see that we've got that toggling effect, so that's

82
00:05:05,360 --> 00:05:06,820
the actually the one that we want.

83
00:05:06,980 --> 00:05:10,100
We could also do an ad active as well if we wanted to.

84
00:05:10,130 --> 00:05:13,340
So if Lanta doesn't matter how many times you click it, it will always stay open.

85
00:05:13,530 --> 00:05:16,460
You can change that to ad and that will have that type of effect.

86
00:05:16,710 --> 00:05:19,640
So instead of toggle, you've got another option of ad.

87
00:05:19,820 --> 00:05:22,460
So now whenever I click it, it's always going to stay open.

88
00:05:22,730 --> 00:05:26,430
But I'm going to prefer to use the toggle one because that's going to be the fact that I'm looking for.

89
00:05:26,810 --> 00:05:31,610
So there's one last thing that we're going to need to do in order to complete the accordion, and that's

90
00:05:31,610 --> 00:05:34,670
going to be closing off all of the active elements.

91
00:05:34,670 --> 00:05:39,290
And we've got all of those already within the con element list.

92
00:05:39,560 --> 00:05:43,670
So all we have to do is loop through those and remove the class of active.

93
00:05:43,850 --> 00:05:46,210
And I'll show you how to do that in the upcoming lesson.

94
00:05:46,430 --> 00:05:51,230
So go ahead and add this into your project loop through all of the main elements at an event listener

95
00:05:51,230 --> 00:05:54,470
to them and select the next element.

96
00:05:54,480 --> 00:05:58,040
The next element, sibling, add the class of active to it.

97
00:05:58,220 --> 00:06:03,680
And you can also see that when you do the inspect that whenever it gets clicked, it's actually adding

98
00:06:03,680 --> 00:06:04,740
that active class.

99
00:06:04,760 --> 00:06:09,650
So there's the active class and there when you click it again, you can see it's adding that active

100
00:06:09,650 --> 00:06:13,940
class that's being added in within the dorm, manipulating the HTML.