toggle method of the classList object

The toggle method of the classList object toggles a given CSS class of an element: adds the class if it doesn't exist and removes it if it does.

Syntax

element.classList.toggle(class);

In this example, when using the toggle method, the class zzz will be removed, since it is already in the element:

let elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

The code execution result:

In this example, when using the toggle method, the class zzz will be added, since it is not present in the element:

let elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

The code execution result: