JavaScriptでのスタイリングのための単一クラス

要素の状態に応じて与える2つのクラスがあるとします：

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

実際には、2つのクラスの存在がここで邪魔になる可能性があります。この場合、セレクター :not を使用してスタイルを次のように書き直すことができます：

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

これにより、クラスを便利に切り替えて、要素をアクティブまたは非アクティブにすることができます：

elem.classList.toggle('active');

段落が与えられます。各段落を最初のクリックで赤色に、2回目のクリックで黒色に戻るようにしてください。