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:

<script type="text/javascript">
 
$(document).ready(function() {
$('#conmutador').toggle(function() {
$('#contenedor').addClass('rojo');
}, function() {
$('#contenedor').removeClass('rojo');
});
});
</script>

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:

<h1>Pruebas de jQuery</h1>
 
<button id="conmutador">Conmutador</button>
<div id="contenedor"></div>

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