The mysterious second argument on the vanilla JS classList.toggle() method

This week, my buddy Kieran Barker taught me that the Element.classList.toggle() method accepts a second argument that you can use to more efficiently write if...else class manipulation.

Today, I want to quickly review how that works. Let’s dig in!

The classList.toggle() method

The classList.toggle() method toggles a class on an element.

If the class already exists, the method removes it. If not, it adds it.

<p id="sandwich">Tuna</p>

let sandwich = document.querySelector('#sandwich');

// This adds the .mayo class to the #sandwich element
sandwich.classList.toggle('mayo');

// This removes it
sandwich.classList.toggle('mayo');

The force parameter

The classList.toggle() method accepts a second argument, force.

If set to true, the method will only add the class, not remove it. If set to false, it will only remove the class, not add it.

For example, let’s say you wanted to add the .mayo class, but only if the .mustard class wasn’t already present. You might normally write that like this.

if (sandwich.classList.contains('mustard')) {
	sandwich.classList.remove('mayo');
} else {
	sandwich.classList.add('mayo');
}

With the force argument, you can instead do this.

let hasMayo = sandwich.classList.contains('mustard');
sandwich.classList.toggle('mayo', hasMayo);

Or, if you prefer one-liners, this.

sandwich.classList.toggle('mayo', sandwich.classList.contains('mustard'));

Kieran’s article goes a bit deeper into how you might use it, so go give it a read if you want to learn more.