Single class for styling in JavaScript

Suppose we have two classes that we give to an element depending on its state:

div.active { color: red; } div.passive { color: black; }

In fact, the presence of two classes here may be redundant. In this case, we can rewrite the styles as follows via the :not selector:

div.active { color: red; } div:not(active) { color: black; }

In this case, we can conveniently toggle our class, making the element active or inactive:

elem.classList.toggle('active');

Given paragraphs. Make each paragraph turn red on the first click on it, and turn black back on the second click.

enru