Cómo usar el evento .toggle() en jQuery

En jQuery hay muchos eventos que nos ayudan a hacer las cosas mucho más fáciles, ya que si sólo recurriéramos a javascript, la realidad sería que tendríamos líneas y líneas de código.

En jQuery hay un evento en particular que me gusta mucho, se llama .toggle(), el cuál nos permite crear funciones o instrucciones que funcionen como un switch, apagado-encendido. Entonces, en este tutorial vamos a ver un ejemplo simple de cómo usar el evento .toggle() en jQuery.

Nivel del tutorial: principiantes

Sintaxis

El evento .toggle() funciona como un evento que registra el clic sobre un objeto, simplemente que a diferencia del evento .click(), .toggle() nos permite hacer una segunda acción como switch, es decir, si damos clic una vez hará algo, y si volvemos a dar clic hará otra cosa. Generalmente la segunda acción es contraria a la primera acción, pero mejor vamos a ver la estructura:

No ve voy a detener tanto en explicar cada sentencia, puesto que no es de este tutorial, pero recordemos que con $() asignamos un elemento para aplicarle una función. Ahora, .toggle() tiene dos parámetros a definir, la primera función, y la segunda función, en donde están los comentarios insertamos nuestro código y podremos ver el efecto switch.

Ahora, vamos a hacer un ejemplo para verlo más práctico.

Si corren la página veremos un botón que al momento de darle clic se va a mover hacia la izquierda, y si le volvemos a dar clic regresará a su lugar de origen, es un ejemplo bastante sencillo, donde además podemos ver el uso de la función  .animate() para poder modificar la propiedad de posición left, y a un lado el tiempo medido en milisegundos.