This lesson, we're going to look at the element class list, and this is a read only property that
returns all of the collection of the class attributes for the element, and it can be used to manipulate
the class list.
And this is where all of the functionality for the accordion is going to take place, where we're going
to use this to select the active object that got clicked and then class list in order to select the
active class list for the element and then apply a method of toggle.
There's also add and remove if we want to add or remove a specific class.
And in this case, what we want to do is toggle the octave class on that element in order to show and
hide the content that's contained within the body.
And what this means is that clicking the head is going to open and then clicking it again is going to
close and it's playing the class list.
So you can pause the video here and practice selecting and updating the class list with toggle.
And also you can check out, add and remove and I'll walk you through the solution coming up.
If you do need additional information, there is more information about classlessness available.
The Mozilla Developer Network, that gives you some examples of how closely it works and it's got a
ton of examples for this one.
So we've got creating an element here.
So selecting the element class list so you can remove the class foo.
And in this case, what they did is they created the elements.
They set the class name to FU and then they removed the class name of Fu from the element and then added
another one.
So they're using the add and remove methods and class list.
And the one that we want to use is toggle because toggle will add if it's not there and remove if it's
there.
And that's exactly what we want to happen.
Whenever we click the head section, there's also replace so you can actually replace an existing class
with another class name.
And that's also a useful functionality that's now going into the ED.
We already have the event listener applied and we can also get rid of some of this console stuff here
and we can get rid of all of the console.
And we're going to select the active element with this and use the class list method and then toggle
and toggle the class name of active to the element.
And these are all classes.
So so we don't have to put the dot in front of the class name.
And one other thing we need to do is we need to set the default to be display none and that automatically
hides all the body content.
So we're ready to try this.
And going back into the project, let's do a quick refresh and a clear.
So whenever we click the head, it will hide, it will show hide, shall hide.
So so everything works as expected.
And in some cases with the accordion, you might want all of the body content to close.
So you only might want to have only one of the body elements open.
And I'll show you how to do that coming up.
And the nice thing about it is if you want to add additional panels, it's really easy to do.
You can just simply add another panel and it's going to function just as the other previous panels.
So you don't have to do any additional coding.
If you update your accordion, it's going to function exactly as before and exactly as the other elements
do.
Try to add an additional panel.