Méthode toggleClass

La méthode toggleClass alterne l'ajout/la suppression d'une classe CSS : si elle n'est pas présente, elle l'ajoute, si elle est présente, elle la supprime.

Syntaxe

Une seule classe CSS :

javascript$(sélecteur).toggleClass(nom de la classe);

Ajouter ou supprimer une classe CSS uniquement en fonction du deuxième paramètre, qui prend les valeurs true ou false :

javascript$(sélecteur).toggleClass(nom de la classe CSS, état);

Plusieurs classes CSS :

javascript$(sélecteur).toggleClass(['classe1', 'classe2', 'classe3', '...']);

Ajouter ou supprimer les classes CSS uniquement en fonction du deuxième paramètre :

javascript$(sélecteur).toggleClass(['classe1', 'classe2', 'classe3', '...'], état');

Application d'une fonction à chaque élément de la sélection, l'état peut être true ou false, et indique à la méthode - uniquement ajouter ou uniquement supprimer la classe CSS :

javascript$(sélecteur).toggleClass(function(numéro dans la sélection, classes actuelles de l'élément, état), [état]);

Exemple

Notre paragraphe a déjà deux classes. Ajoutons-lui également la classe www :

html<p id="test" class="eee ggg">text</p>

javascript$('#test').toggleClass('www');

Le code HTML deviendra alors :

html<p id="test" class="eee ggg www">text</p>

Exemple

Et maintenant la classe www est déjà présente dans l'élément - supprimons-la :

html<p id="test" class="eee ggg www">text</p>

javascript$('#test').toggleClass('www');

Le code HTML deviendra alors :

html<p id="test" class="eee ggg">text</p>

Voir aussi