Método toggle

El método toggle alterna la visualización/ocultación suave de elementos. Si un elemento se muestra, se ocultará y viceversa.

Sintaxis

Mostrar durante un tiempo determinado en milisegundos, 400ms por defecto:

.toggle(duración);

El tiempo se puede especificar no solo en milisegundos, sino también con las palabras clave slow (600ms) y fast (200ms), cuanto mayor sea el valor, más lenta será la animación:

.toggle('slow' o 'fast');

Se puede pasar el valor true o false con el parámetro display. Si es true, el elemento solo se mostrará; si es false, se ocultará:

.toggle(display);

Si no se especifican parámetros, no habrá animación, los elementos se mostrarán/ocultarán instantáneamente:

.toggle();

También se puede pasar una función de easing como segundo parámetro, y una función callback como tercero - se ejecutará después de completar la animación. Ambos parámetros son opcionales:

.toggle(duración, [función de easing], [función callback]);

Se puede pasar simplemente una función callback como segundo parámetro opcional - se ejecutará después de completar la animación:

.toggle(duración, [función callback]);

Se pueden pasar varias opciones al método, en forma de objeto JavaScript, que contiene pares clave: valor:

.toggle(opciones);

Dicho objeto puede pasar los siguientes parámetros y funciones - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. La descripción de estos parámetros se puede consultar para el método animate. Por ejemplo, establezcamos la duración y la función de easing:

.toggle( {duration: 800, easing: easeInSine} );

Ejemplo

Después de hacer clic en el botón, mostremos suavemente un párrafo oculto usando el método toggle. Pasando la palabra clave slow, establecemos la velocidad a 600ms. Al hacer clic nuevamente, se ocultará:

<button>mostrar texto</button>
<p style="display: none">texto</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Ver también

método fadeToggle,
que cambia la opacidad de los elementos
método slideToggle,
que alterna la visualización/ocultación suave de elementos
método show,
que muestra suavemente los elementos
método hide,
que oculta suavemente los elementos