1
00:00:00,180 --> 00:00:05,880
All right, finally, we're getting to JavaScript, and in this lesson, we're going to select the elements

2
00:00:05,880 --> 00:00:13,320
using query selector all and selecting all of the elements that are matching the class of panel.

3
00:00:13,620 --> 00:00:19,920
And what query selector all will do is it returns back all of the static node list representing the

4
00:00:19,920 --> 00:00:24,000
list of elements that match the specified group of selectors.

5
00:00:24,180 --> 00:00:26,040
And the selector is going to be really simple.

6
00:00:26,050 --> 00:00:31,530
We're only looking for anyone that has a class of panel and this is the same way that we do the CSF

7
00:00:31,530 --> 00:00:35,910
selector or we go to adopt four for classes and then the class name.

8
00:00:36,180 --> 00:00:41,280
And then what we're going to do is once we've got it within the accordion object, we're going to loop

9
00:00:41,280 --> 00:00:48,060
through all of the objects and output, all of the elements using console log so you can pause the video

10
00:00:48,060 --> 00:00:52,580
here and walk through the exercise and I'll walk you through how to do that coming up.

11
00:00:57,720 --> 00:01:02,640
So now we're ready for JavaScript and I'm going to do it within the script tags as well, so we're going

12
00:01:02,640 --> 00:01:05,370
to have it all contained within the one HTML document.

13
00:01:05,520 --> 00:01:10,920
And you could, of course, link out to a script, file, a JavaScript file, and as well do the linking

14
00:01:10,920 --> 00:01:12,280
of the success if you want.

15
00:01:12,570 --> 00:01:16,950
So selecting a variable name and to call this accordion.

16
00:01:17,130 --> 00:01:23,670
And then we're using the document object and using query selector as our selector.

17
00:01:24,000 --> 00:01:29,310
So it's going to select all of the matching elements to this selection.

18
00:01:29,580 --> 00:01:34,080
And we're selecting all of the elements with a class name of panel.

19
00:01:34,650 --> 00:01:41,070
And then that's going to be loaded into the accordion object and we can use the console to check out

20
00:01:41,160 --> 00:01:41,970
how this looks.

21
00:01:42,390 --> 00:01:48,660
So do a quick refresh and inspect, open up the console so we can see the console message.

22
00:01:48,900 --> 00:01:54,720
And within here we've got a node list and within the node list, we've got all of the elements that

23
00:01:54,720 --> 00:01:55,830
we want to use.

24
00:01:56,100 --> 00:01:57,320
So this is dynamic.

25
00:01:57,330 --> 00:02:04,320
So if we had another panel and as long as we kept it within the panel, the same class structure, we

26
00:02:04,320 --> 00:02:05,940
could add as many panels as we want.

27
00:02:05,940 --> 00:02:08,400
And they're all going to work with the JavaScript.

28
00:02:08,760 --> 00:02:13,860
So now let's loop through the accordion object and use for each.

29
00:02:13,860 --> 00:02:15,740
So nodes has the node list.

30
00:02:15,750 --> 00:02:22,560
We have a length of three and then looping through for each will return a function, selecting each

31
00:02:22,560 --> 00:02:27,600
one of the elements individually and then you can log these out in the console as well.

32
00:02:27,810 --> 00:02:31,830
So now when I refresh, we've got all of the elements being output.

33
00:02:31,830 --> 00:02:34,110
So it's outputting that whole element object.

34
00:02:34,620 --> 00:02:39,930
And that means that we're ready to move on the next step where we can apply some more interaction to

35
00:02:39,930 --> 00:02:43,340
these elements and apply an event listener to them.

36
00:02:43,590 --> 00:02:47,280
So do the same thing with your project and you'll be ready to move on to the next lesson.