Hey, welcome back in this lesson, we're going to be updating the accordion because in some cases you
might want your accordion to hide all the open panels.
Now, there are a number of ways to do this, and I'm going to present you two different ways to do
this and using the class list to remove all of the active and then also remove the active and toggle
the active on the selected element body.
So the objective of this lesson is to use the query selector and select the element that you want to
remove active from.
So you can pause the video here and I'll walk you through the solution coming up.
So find all the elements with the octave class and remove active from those panels, effectively hiding
them.
We're going to keep this toggle active, but we need to do something before that, and that's selecting
all of the available elements and removing active from any of that might be currently present.
So we don't want to have a scenario where we've got multiple bodies open and we only want to have only
one open.
So in order to limit this, we need to select all of the elements that have the panel.
And we've already done that in accordance where we have that list of all of them already here and available
with an accordion.
I just commented those out so we can clear the console messages and that means that we can take accordion
and loop through each one of the accordions, just as we did before selecting the elements and then
going to use él again.
And then as we move through, we can take the class list of the element and apply a remove.
So the way that remove works is that it will remove active if it's available within the element class
list.
So let's try that and refresh.
So we've got one open, we've got another one open, another one open.
So we're only able to open one at a time.
Now, there is another way to do this.
And personally, I find that this is the easiest way to do this.
There's also if you want to do another query selector, you can do that as well within the toggle element
where we can create another variable.
And this is only going to be within this function where we're selecting all of the ones that have octaves
and then using the document's query selector all we're going to select all of the elements that have
a class of active and all log all of them out.
So this is going to only select if there are other ones that have octaves.
So we see that there were no others that had active.
So the node list is empty now.
We've got another one.
We've got two that have active and now we've got three that have active.
So there's a bunch of them now.
All four have octave.
And that means that once they're selected, we can manipulate them.
And the same idea that we just did there where we did the for each selecting all of the octaves and
using for each, we're going to loop through that node list and select all of the elements contained
within the node list and using the L objects and then classless we can remove active from those.
So same idea, same type of thing, except this time we're using query selector within the function
in order to select the elements.
And as you can see, the effect is going to be the same thing where it's hiding all of those panels
that are open already and in this case that have the class of octave.
So we're looking specifically for that selector.