This is the last lesson of the S. I hope you had an opportunity to try coding this JavaScript, according
yourself.
I've stripped away some of the excess code and just brought it back down to the bare bones functionality
so that this way, if you wanted to, you could take this code and repurpose it and reuse it within
your own projects.
We're going to do a quick run through of what's important here within the code as we built this project.
So the most important part is for the body to display none, and that's the default state.
So we have a default state where the body is done if you actually want one of these panels to be open
by default.
So whenever the page thoughts you want to be open, you can always add the octave class.
And this will still function whenever you click any of the other ones.
It will still close that one because this one has an active clause.
So that's another option as well, if you want to have it as one of them as an opened state.
And this was where the important class was that we're using JavaScript in order to add and remove the
active class.
And the rest of the styling was just to distinguish between the head and the body content.
And of course, you can apply your own styling as needed.
Now you can add in any number of panels, as many as you want, as long as they're contained within
the main div, because that's where we're applying the styling to.
You could remove out mean and just look for active and a body and head and a body so you can do that
as well if you want to be a little bit more flexible.
But generally I like to keep it as a class of men, or you could give it a class of accordion and rename
it so that you can reuse it within your projects.
And none of the classes should overlap with any of the existing classes you have in your project.
So just keep that in mind.
And then within the panel, we have a head, we have a body to make sure the structure is the same for
each one.
And you could just simply copy and paste and add as many panels as you want.
And when you reload the page, they're all going to be working.
We use JavaScript, query, select all so selected all of the elements on the page of the class of panel
put into an object called accordion that would loop through the accordion object and selected all of
the elements that were available.
So this was actually returning back a node list that had a length that we could loop through.
And simply as we select each one of the elements available within the node list, we're adding an event
listener and the listener was listening for Toggle Al and that's where we were applying it, the function.
So each time one of these elements gets clicked, we were adding in the were we toggling the class of
active?
So that allowed us to close and open.
Now there is an issue that if you want to close the panel again by clicking it, you're not able to
do that.
And the reason is that we're looping through all the elements and removing active and we're toggling
active on that one.
So that's what stays open.
And you can see this when you inspect the element and look at what classes are being applied to the
panel.
We see we've got active, they're now active, applied there and active as applied there.
So we go to toggle activists already gone and it's already been removed.
And that's why we've got that issue where we're not able to pick it up.
But there is a solution for this.
And I'm just going to do a quick run through of how we can solve this problem so we can select the element
target parent.
And you might want to use this one as well.
So this is selecting the element target parent, because when we pick up the event target, we're either
getting the header or the body.
We're not getting the parent.
So each one of them will have the same parent when we look at the structure and this will allow us to
select panel.
So that would be getting the parent and clear the console and just show you that this case now we're
getting the active panel and we see that the active class is being applied there, and that's the one
that we want to look for.
So as we're looping through all of the elements, we can have a condition that checks to see if the
element that we're on is equal to the same one as the parent.
And if it is, then we can apply condition and we can also have a false statement.
And the condition is that if it's the active one, we're going to toggle.
And if it's not the active one, then we're just going to remove active and really it shouldn't have
active.
But this is just to be sure and just to be safe.
So when we do it this way, we need to also update this, because this is no longer relevant, because
it's within this scope now and we've moved it out of the main scope.
So it's not going to be able to identify what this is.
And this is what.
We can use e, l e or we could use the element target parent, because it's going to look to the parent
scope to figure out what the value of the existing element of that object target is.
So let's save that and refresh.
And now you can see when we click them, they actually close the open ones.
And that's because it's picking up and it's looping through and it's checking to see if the element
is the same one that we've got open.
And that's the way to apply that type of fix.
So you may need that.
You may not want that.
And you can really customize this as needed if you have any questions or comments.
I'm always happy to help clarify any of the content that's been presented, and I do encourage you to
try it out, experiment a little bit and get the accordion working the way you want it to work and also
apply some styling and make it look really nice.
Thanks again for taking the course and look forward to seeing you in the next one.