All right, finally, we're getting to JavaScript, and in this lesson, we're going to select the elements
using query selector all and selecting all of the elements that are matching the class of panel.
And what query selector all will do is it returns back all of the static node list representing the
list of elements that match the specified group of selectors.
And the selector is going to be really simple.
We're only looking for anyone that has a class of panel and this is the same way that we do the CSF
selector or we go to adopt four for classes and then the class name.
And then what we're going to do is once we've got it within the accordion object, we're going to loop
through all of the objects and output, all of the elements using console log so you can pause the video
here and walk through the exercise and I'll walk you through how to do that coming up.
So now we're ready for JavaScript and I'm going to do it within the script tags as well, so we're going
to have it all contained within the one HTML document.
And you could, of course, link out to a script, file, a JavaScript file, and as well do the linking
of the success if you want.
So selecting a variable name and to call this accordion.
And then we're using the document object and using query selector as our selector.
So it's going to select all of the matching elements to this selection.
And we're selecting all of the elements with a class name of panel.
And then that's going to be loaded into the accordion object and we can use the console to check out
how this looks.
So do a quick refresh and inspect, open up the console so we can see the console message.
And within here we've got a node list and within the node list, we've got all of the elements that
we want to use.
So this is dynamic.
So if we had another panel and as long as we kept it within the panel, the same class structure, we
could add as many panels as we want.
And they're all going to work with the JavaScript.
So now let's loop through the accordion object and use for each.
So nodes has the node list.
We have a length of three and then looping through for each will return a function, selecting each
one of the elements individually and then you can log these out in the console as well.
So now when I refresh, we've got all of the elements being output.
So it's outputting that whole element object.
And that means that we're ready to move on the next step where we can apply some more interaction to
these elements and apply an event listener to them.
So do the same thing with your project and you'll be ready to move on to the next lesson.