Como usar la función toggle en jQuery

Después de un largo tiempo sin escribir por motivos de trabajo, vuelvo al blog. Hoy voy a anotar un truco con jQuery que puede ahorrarnos mucho código: la función toogle.
La función toogle actúa como un interruptor, de manera que acepta dos parámetros, que serán dos funciones, una para cuando actives el interruptor y otra para cuando lo desactives.

Vamos a ver un ejemplo en el cual añadiremos una clase css a un div pulsando en un botón, de manera que cuando pinchemos en el botón , el div pasará a tener un color de fondo rojo y cuando volvamos a pulsar, el color de fondo desaparecerá.

Vamos a ver el ejemplo:

Primero creamos la clase css:

.rojo{
background:red;
width:200px;
height:300px;
}

Después introducimos el siguiente código javascript en en el head de nuestro documento html:


Usamos los selectores de jQuery para obtener el objeto con id conmutador y le aplicacamos la función toogle.

Y este es el código html que va dentro del body:

Pruebas de jQuery

Ya tenemos nuestro interruptor en javascript con unas pocas líneas de código.

Compartir:
Share on facebook
Share on linkedin
Share on twitter
Share on whatsapp
Share on email
Abrir chat
¿Tienes alguna duda que podamos aclarar?