Hello and welcome back in this lesson, we're going to finish off our project, so this is our accordion
project that we've been working on.
When we click the elements, we see that it opens up the box of content, but when we click it again,
it closes it.
But we see that we've got multiple ones that are opening up and sometimes you might actually want this
effect.
So then at that point you are actually completed.
But if you want them to close up and only want to have one of the boxes open.
So that's typical within accordion's, you've got to remove the octave class.
And there's a number of different ways to do this.
You could select all use square selector and select all the elements of the class of active and then
iterate through them and simply remove out that class of active.
Or since we already have our common element object, we can make use of that and we can use that within
a function.
So setting up and we can call it like clear, active or something like that.
And what this function will do whenever it runs, it can loop through all the elements that have a class
of content.
And I'll check to see if they've got the class of active as well.
And if it does, then we can simply remove out that class.
So that's a quick and easy way to do that.
So I'm going to simply go through I'm going to update this instead of mean.
This would now be corne, so looping through all of the elements with the class of corn.
And we're going to simply select the whatever the octave element is.
So corn elex and using the same format, using classless and then remove and simply remove that class
of active.
And if it doesn't have it there, nothing will happen.
But if it does have a class of active it will remove it.
And so now all we have to do is add this function here before we toggle and add the active one.
And you can see that now whenever I click it, it shuts the other ones down.
So it removes the octave class from those existing ones and only shows the ones that I'm currently looking
at.
So that was a quick and easy way to create an accordion.
And I hope you had an opportunity to try that out for yourself.
Well, I had an experiment to try the code out.
The code is also included.
And if you have any questions or comments, please feel free to ask.
Thanks again for taking the section.
I'll do a quick run through of the code as well.
So with the JavaScript, so we structured our HTML having one element and then the next sibling was
the content.
And you do need to keep that format in order to use the next sibling method.
And then we selected all of the elements into our JavaScript objects.
We loop through the first one, the main elements and added event listeners.
So that added the ability to click those.
And once they got clicked, we ran a block of code.
So the first part of the code cleared out any of the active ones and the second one added in that octave
toggle one.
So we could actually change that to remove if we want it to now, because now it's simply removing all
of the actives there that are available.
So we could simply have this to add and it's going to be doing the same thing.
So it's not shutting anymore.
And that was the difference in what the toggle is doing.
And then what we did here with Clear Active, we created a function that will loop through iterate through
all of the elements with the class of content and simply remove out active.