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:

javascript$(selector).toggleClass(nombre de clase);

Agregar o eliminar una clase CSS únicamente dependiendo del segundo parámetro, que acepta valores true o false:

javascript$(selector).toggleClass(nombre de clase CSS, estado);

Múltiples clases CSS:

javascript$(selector).toggleClass(['clase1', 'clase2', 'clase3', '...']);

Agregar o eliminar clases CSS únicamente dependiendo del segundo parámetro:

javascript$(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:

javascript$(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:

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

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

El código HTML quedará así:

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

Ejemplo

Y ahora la clase www ya está presente en el elemento - vamos a eliminarla:

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

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

El código HTML quedará así:

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

Véase también