I know what you're thinking, you've come for the JavaScript, not the HTML, and I do promise you no
more HTML, just JavaScript from now on in the section.
So next, what we need to do is select our elements.
We created the elements in the last lesson.
Let's create an element object in JavaScript so that we can utilize the element information within our
script.
So we're selecting all of the elements that have a class of mean.
So selecting the main element and we can use document and because there's many of them using query selector
also to select all of them.
So this will give us a node list with all of the elements that have the class of mean and we're going
to do the same thing for the content.
So our content element using document, the same format, the query selector all selecting all of the
elements with a class of content.
So that will give us two objects in JavaScript.
So we refresh the page.
You don't see anything different because of course it's JavaScript.
But when I output that in the console, you can see I've got a node list selecting all of the relevant
elements that had that class.
And you could also test it out with Corne Element to make sure that you've got the node list.
And once you have this and if you can type it in the console, then you're ready to make use of those
objects that you've selected those elements into.
So next thing that we need to do is apply some type of action, some type of event listener, because
we know what an accordion you click it and something happens.
So that's the whole idea is that we want to be able to click these elements.
So we also want to make them clickable.
So I do want to add in into the I do want to add into the cursor so I know I'm going to make this really
quick and set it as a pointer so that whenever we do go over them, that we get the little hand pointer
so that we know that or the user knows that this is clickable.
Let's use a for loop setting up our for loop with a variable of X and we're going to loop through while
X is less than the main elements length.
And this is a node list.
So it has a link that behaves the same way as an array and then we can increment it X.
So this is going to allow us to loop through all of the elements.
And if you want to check that, it's always a good idea to check it along the way just to make sure
that you are getting the elements properly.
So now when I refresh it, you see that we're listing out all of those elements.
So these are corresponding with the elements, with the class of main.
So we're good to go to the next step where we're going to play an action to it so we can add an event
listener to the element by selecting that main element that is active within the list.
And then we can add event listeners to it.
We can specify the event that we're listening for.
So we're listening for a click.
And then what we want to do whenever it gets clicked, we're going to create an anonymous function and
have that run, taking our action, running the block of code whenever it gets clicked.
So what do we want to do with this element once it gets clicked?
And if you want to test it, you can always test that element.
You can output this or whatever you want to output.
And you can see it's outputting that element information.
You could also use the element objects.
It's going to output that same thing.
And you can see it's outputting the same thing when it gets clicked.
And I'm going to actually get rid of this console message because we don't need it.
And as you can see now, whenever I click it, we're outputting that element object.
So this and the main element are going to be the same because we are looping through it and they are
representing the same element object.
So what we want to do is we want to select the next sibling and the next sibling.
And as we look into our structure, we see that we've got another element that's got content and that's
right next to it.
So that's the next sibling.
And we're going to use JavaScript method called next element sibling.
So it returns the element immediately after it.
So see what happens.
So now when we click it, we see we get the element and this is the one that's got all of the content
in it.
And as you click the different ones, you get the different elements, siblings.
And that's actually exactly what we want to happen, because these are the ones that we want to apply
the active class to.
So now that we are able to select that element, we can apply the octave class to it.
Let's go ahead and we're going to do that.
And so we're taking the main elements X and selecting the next element sibling and then taking our class
list.
And we're going to toggle the class of active to it and double quote the so it can be single or double
quotes.
It doesn't actually matter and it's getting a little bit long.
So let me move that over and I'm going to move this one over as well.
Will refresh.
And you can see that when I click them, they open up now with an accordion.
What typically happens is when you open up one, it closes the rest of them.
So that's what we want to happen.
We want to be able to close off.
The rest of them, and when we do click it again, we see that we've got that toggling effect, so that's
the actually the one that we want.
We could also do an ad active as well if we wanted to.
So if Lanta doesn't matter how many times you click it, it will always stay open.
You can change that to ad and that will have that type of effect.
So instead of toggle, you've got another option of ad.
So now whenever I click it, it's always going to stay open.
But I'm going to prefer to use the toggle one because that's going to be the fact that I'm looking for.
So there's one last thing that we're going to need to do in order to complete the accordion, and that's
going to be closing off all of the active elements.
And we've got all of those already within the con element list.
So all we have to do is loop through those and remove the class of active.
And I'll show you how to do that in the upcoming lesson.
So go ahead and add this into your project loop through all of the main elements at an event listener
to them and select the next element.
The next element, sibling, add the class of active to it.
And you can also see that when you do the inspect that whenever it gets clicked, it's actually adding
that active class.
So there's the active class and there when you click it again, you can see it's adding that active
class that's being added in within the dorm, manipulating the HTML.