La función toggle() de JQuery nos ayuda a mostrar y ocultar cualquier elemento, ya sea mediante su id o mediante su clase. Esta función se ejecuta al realizar una acción previamente programada (clic en un elemento, tiempo de carga, etc.).

Está función es equivalente a dos funciones de JQuery, estas funciones son las siguientes: .show() y .hide(); .toggle() realizará ambas funciones con un elemento si es que buscamos mostrarlo y ocultarlo de una manera más sencilla y sin necesidad de ejecutar mucho código dentro de nuestro sitio web.

Además .toggle() puede realizar animaciones al momento de mostrar y de ocultar los elementos; estas animaciones pueden configurarse al momento de programar nuestra función en nuestro código; las animaciones más comunes suelen relacionarse con el tiempo para aparecer y desaparecer uno o varios elementos.

 

Sintaxis

$(.selector).toggle();

Animación

Como te mencione anteriormente, la función de toggle() tiene la capacidad de aceptar animaciones para realizar la transición de mostrar y ocultar tu elemento; estas animaciones suelen estar relacionadas con el tiempo de aparición y ocultación de nuestro elemento; por lo regular, la animación que más se utiliza es la de slow.

$( "button" ).click(function() {
$( "#selector" ).toggle( "slow" );
});