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 :
$(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 :
$(sélecteur).toggleClass(nom de la classe CSS, état);
Plusieurs classes CSS :
$(sélecteur).toggleClass(['classe1', 'classe2', 'classe3', '...']);
Ajouter ou supprimer les classes CSS uniquement en fonction du deuxième paramètre :
$(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 :
$(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 :
<p id="test" class="eee ggg">text</p>
$('#test').toggleClass('www');
Le code HTML deviendra alors :
<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 :
<p id="test" class="eee ggg www">text</p>
$('#test').toggleClass('www');
Le code HTML deviendra alors :
<p id="test" class="eee ggg">text</p>
Voir aussi
-
les méthodes
addClass,removeClass,hasClass -
La propriété JavaScript
classList,
qui permet d'alterner l'ajout/la suppression d'une classe en JavaScript pur
