Categorías: jQuery

jQuery toggle(): Mostrar, ocultar y animar elementos en tu web

Vamos a ver el funcionamiento del efecto jQuery toggle(), mayoritariamente se usa en casos para ocultar y mostrar elementos de una página web, aunque también funciona como switch entre 2 funciones.

Cuando hablamos de mostrar no lo confundáis con jQuery load(), ya que esta función de jQuery carga un html externo en un div.

Otras funciones interesantes

Este efecto de jQuery es muy parecido en su sintaxis a jQuery .click(). El efecto .toggle() solo te permite alternar entre 2 acciones mientras que .click() hace una acción concreta por cada click.

Otros efectos básicos similares son jQuery slideDown(), slideUp() y slideToggle(), jQuery fadeIn(), fadeOut() y fadeTo() y jQuery show() & hide() y jQuery animate().

Sintaxis de jQuery toggle()

Os pongo las 4 maneras que hay para invocar el efecto extraídas de su documentación oficial:

.toggle( )
.toggle( [duration] [, callback] ) 
.toggle( [duration] [, easing] [, callback] ) 
.toggle( showOrHide )

Ahora os describo los parámetros:

duration: Duración en milisegundos de la animación, por defecto 400.
callback: Función callback que se ejecutará cuando termine la animación.
easing: Función a ejecutar durante la animación, los valores son linear o swing.
showOrHide: Mostrar u ocultar un elemento.

Según la documentación oficial de jQuery .toggle():

Muestra u oculta los elementos seleccionados

Ejemplo de animación básica con jQuery toggle()

En esta primera demo de ejemplo voy a esconder y mostrar un botón cada vez que se haga click en otro bóton, así vemos cómo muestra y oculta el elemento.

<!-- Libreria jQuery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function()
     {
     $("#boton").on( "click", function() {  
         $('#target').toggle();
          });
     });
</script>

<input id="target" type="button" value="ESTE BOTÓN APARECE Y DESAPARECE">
<input id="boton" type="button" value="toggle()">

Explico el código de la primera demo:

Detectamos el click del elemento que tiene id ‘boton’ ayudándonos de la función on().
Tras la deteccción, .toggle() mostrará u ocultará los elementos con id ‘target’.
Dependiendo del estado (visible u oculto) del elemento con id ‘target’ se ocultará o mostrará, en este caso el elemento es un botón.

Animando el efecto con jQuery .toggle(«slow»), .toggle(«fast») y mediante milisegundos

Tras ver como es la llamada básica ahora toca usar los parámetros ‘slow’, ‘fast’ y los milisegundos. Con estos parámetros haremos que la animación del elemento se haga de una forma lenta o rápida dependiendo de la opción escogida.

Os pongo el código de la segundo ejemplo en la que mostraremos u ocultaremos una imagen.

<!-- Libreria jQuery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function()
  {
  $("#boton").click(function () {  
   $('#target').toggle("slow");
   });
  $("#boton1").click(function () {  
   $('#target').toggle("fast");
   });
  $("#boton2").click(function () {  
   $('#target').toggle(5000);
   });
   });
</script>

Explico los diferentes parámetros pasados en las funciones tras hacer click en cada uno de los 3 botones:

Con el parámetro ‘slow‘ hacemos que la imagen aparezca y desaparezca de forma lenta.
Con ‘fast‘ la animación se realiza mucho más rápido
Por último he pasado como parámetro 5000 milisegundos (5 segundos) para realizar una animación personalizada a nuestro antojo.

Aquí el código de los botones y la imagen:

<img src="/wp-content/uploads/2012/12/jquery.jpg" id="target">

<input id="boton" type="button" value="toggle() con efecto slow">
<input id="boton1" type="button" value="toggle() con efecto fast">
<input id="boton2" type="button" value="toggle() con efecto de 5000 milisegundos">

Cómo usar el callback de jQuery toggle()

Hasta ahora hemos visto el funcionamiento de la función con los parámetros básicos. Vamos enriquecer nuestro script invocando una función en el callback del efecto toggle(), es decir, al término de la animación.

Para verlo en funcionamiento he creado esta tercera demo de ejemplo para ocultar o mostrar una imagen con callback.

<!-- Libreria jQuery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function()
  {
  $('#boton').click(function() {
   $('#target').toggle(1000, function() {
         alert ('Efecto terminado!');
         });
   });
   });
</script>

Y de nuevo comento la jugada…

Esta vez al hacer click en el botón se desencadena un efecto de un segundo de duración (1000 milisegundos).
Al término de la animación (tras mostrar u ocultar la imagen) se usa el callback para sacar un alert por pantalla avisando del final del efecto.

Aquí el código de la imagen y botón:

<img src="/wp-content/uploads/2012/12/jquery.jpg" id="target">
<input id="boton" type="button" value="toggle() con callback">

Con el uso del callback podéis hacer en vuestras webs otras operaciones en cadena una vez finalizado el efecto toggle().

Animaciones durante el efecto con .toggle(«swing») y .toggle(«linear»)

En esta cuarta demo vamos a ver 2 nuevos parámetros (no se usan demasiado) para cambiar el efecto levemente:

<!-- Libreria jQuery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function()
  {
  $("#boton").click(function () {  
   $('#target').toggle("swing");
   });
  $("#boton2").click(function () {  
   $('#target').toggle("linear");
   });
  });
</script>

Con ‘linear‘ el efecto se ejecuta con velocidad constante.
Mientras que con ‘swing‘ el efecto va ligeramente más rapido en la mitad de la animación.

El código HTML de la imagen y botones es el siguiente:

<img src="/wp-content/uploads/2012/12/jquery.jpg" id="target">
 
<input id="boton" type="button" value="linear">
<input id="boton2" type="button" value="swing">

jQuery .toggle(showOrHide)

Este parámetro fuerza el efecto a realizar, oculta o muestra.

$('#target').toggle(showOrHide);

El parámetro es equiparable al efecto de la función jQuery show() y hide().

if ( showOrHide == true ) {
    $('#foo').show();
    } 
    else if ( showOrHide == false ) {
        $('#foo').hide();
        }

Alternar 2 funciones con jQuery .toggle()

Quinta demo donde podemos ver cómo intercambiar 2 funciones con jQuery toggle.

<!-- Libreria jQuery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){  
 $('#boton').toggle(
     function () {
                alert('Primera función');
            },
     function () {
                alert('Segunda función');
            }
        );
});
</script>

En el código se ve cómo la función ejecutará un alert u otro dependiento de la última ejecución de la misma.

Ocultando elementos como párrafos, imágenes o elementos con clases

Sexta y última demo del efecto toggle(), esta vez vamos a ver como ocultar elementos de nuestra web, bien sean párrafos, imágenes o elementos con determinadas clases.

Hasta ahora solo había puesto ejemplos que ocultaban elementos con determinados ids.

<!-- Libreria jQuery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){  
 $("#boton1").click(function () {
            $('p').toggle("slow");
        });
        $("#boton2").click(function () {
            $('img').toggle("slow");
        });
        $("#boton3").click(function () {
            $('.prueba').toggle("slow");
        });
});
</script>

Explico las líneas superiores tras el click de los 3 botones:

Al clickar el botón con id ‘boton1‘ se muestran u ocultan los párrafos.
Al clickar el botón con id ‘boton2‘ se muestran u ocultan las imágenes.
Al clickar el botón con id ‘boton3‘ se muestran u ocultan los elementos con class ‘prueba’.

El código HTML es el siguiente:

<p>Esto es un párrafo Esto es un párrafo Esto es un párrafo Esto es un párrafo Esto es un párrafo Esto es un párrafo Esto es un párrafo </p>

<p>
<img height="250" src="/wp-content/uploads/2012/12/jquery.jpg">
</p>
 
<p class="prueba">Esto es un párrafo con class="prueba" Esto es un párrafo con class="prueba" Esto es un párrafo con class="prueba"</p>
 
<input id="boton1" type="button" value="ocultar/mostrar parrafo">
<input id="boton2" type="button" value="ocultar/mostrar imagen">
<input id="boton3" type="button" value="ocultar/mostrar clase 'prueba'">