Let’s take a look at how we would generally do this with jQuery. Beware though, you’re going to see this next snippet and think “Why are we even trying to do this in vanilla JS?!”. I know…but check out all these posts that advocate for the performance benefits of vanilla JS. I won’t get into that here, this is purely intended to be a reference for when you decide to make the switch.
Alright, so the basic jQuery class toggling function would look something like this:
Pretty straight forward. We’ll take this apart piece by piece. The first thing we need to do with vanilla JS is to actually target the element. Now as I’m sure you know there is always the option of utilizing
getElementByID. But in this case, we’re trying to target a class. In reality, we probably want to avoid using an ID if we can since the specificity could cause issues down the road.
MDN states that querySelector:
Returns the first element within the document hat matches the specified group of selectors.
This is perfect for our case, we currently only have one element on the page with a class name of
.toggle-me. If you have multiple elements on the page with the same class name, you’ll need to look into querySelectorAll, which I’ll dive into in another blog post.
So, lets set our classname to a variable to make it easy to reference.
Perfect, now we need some sort of way to detect when that element is clicked. If you were lucky enough to see the days when folks used the inline
onclick function, then you’ll have probably guessed where we’re headed.
onclick property allows us to utilize a function expression, or a named function defined elsewhere right within it. For this example I’ll utilize a function expression just to keep things brief.
Sweet! If you check your console you should see our ‘clicked!’ logging.
classList property by itself is pretty self explanatory. It outputs a collection of the class attributes of the passed element. If we were to run that on our
You’ll notice that the output in the console provides us with a DOMTokenList object. Expanding that object will show that the first value in the object, is “toggle-me”.
With this object we can now use the
toggle() method associated with the
classList property. Much like with jQuery, in addition to
classList property gives us access to the
item() methods. For our purposes, we’ll just stick with
Unfortunately, with vanilla JS the
$(this) property doesn’t exist. However, since we are caching the the element we are manipulating, all we need to do is attach the
classList property to our element, and then chain our
toggle() method, passing on our active class like so: