Método toggleClass
El método toggleClass alterna entre agregar/eliminar
una clase CSS: si no está presente, la agrega; si está presente, la elimina.
Sintaxis
Una clase CSS:
$(selector).toggleClass(nombre de clase);
Agregar o eliminar una clase CSS únicamente dependiendo
del segundo parámetro, que acepta valores
true o false:
$(selector).toggleClass(nombre de clase CSS, estado);
Múltiples clases CSS:
$(selector).toggleClass(['clase1', 'clase2', 'clase3', '...']);
Agregar o eliminar clases CSS únicamente dependiendo del segundo parámetro:
$(selector).toggleClass(['clase1', 'clase2', 'clase3', '...'], estado');
Aplicar una función a cada elemento en el conjunto,
el estado puede ser true o false,
e indica al método agregar o eliminar únicamente
la clase CSS:
$(selector).toggleClass(function(índice en el conjunto, clases actuales del elemento, estado), [estado]);
Ejemplo
Nuestro párrafo ya tiene dos clases. Vamos a
agregarle también la clase www:
<p id="test" class="eee ggg">texto</p>
$('#test').toggleClass('www');
El código HTML quedará así:
<p id="test" class="eee ggg www">texto</p>
Ejemplo
Y ahora la clase www ya está presente en el elemento
- vamos a eliminarla:
<p id="test" class="eee ggg www">texto</p>
$('#test').toggleClass('www');
El código HTML quedará así:
<p id="test" class="eee ggg">texto</p>
Véase también
-
métodos
addClass,removeClass,hasClass -
Propiedad JavaScript
classList,
con la cual se puede alternar entre agregar/eliminar una clase en JavaScript puro
