Animaciones sencillas con jQuery para esconder y presentar elementos

jQuery .toogle(): ejemplos prácticos. Cómo mostrar y ocultar elementos en una web

Siguiendo con el tema de mostrar y ocultar información, bloques o cualquier otro elemento de una web, vamos a ver ahora algunos ejemplos prácticos para alternar la visibilidad con jQuery.

El método .toggle() proporciona esta funcionalidad. Por ejemplo, se puede utilizar para mostrar y ocultar contenido con animaciones o sin ellas, crear bloques que desaparecen al pulsar sobre ellos (como los avisos de cookies), ocultar paneles de opciones, mostrar respuestas ocultas, esconder información sólo disponible para usuarios registrados, etc.

La manera más simple de utilizar este método sería sin añadirle ningún parámetro:

$('.elemento').toggle();

De todas formas, conviene tener en cuenta que este método .toggle() usado como click especial para alternar funciones ya no está incluido en jQuery desde la versión 1.9 (si se usa como efecto para mostrar y ocultar elementos no hay problema), por lo que es necesario incluir el plugin jQuery Migrate, o bien extraer este método del código fuente y usarlo aparte.

En otras palabras, si utilizas jQuery 1.9 o superior, el método .toggle() no funcionará por sí solo (más información aquí).

Para poder utilizarlo con jQuery 1.9 o versiones posteriores, lo más fácil es utilizar jQuery Migrate. Lo único que hay que hacer es incluir el archivo después de jQuery. Así:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

La otra solución sería extraer sólo el método $().toggle() del código del plugin y usarlo donde lo necesitemos. La función está definida en el archivo event.js de jQuery Migrate (a partir de la linea 53): “jQuery.fn.toggle = function( fn, fn2 )…”

jQuery Toggle: ejemplos prácticos

Partiendo del esquema anterior, podemos llegar a todo tipo de soluciones. Vamos a ver algunos ejemplos útiles que pueden servir en cualquier página web.

Ejemplo 1: Mostrar y ocultar

En este primer ejemplo, ocultamos la respuesta a una pregunta y hacemos que aparezca pulsando sobre un enlace.

En este caso, los elementos seleccionados se mostrarán y ocultarán inmediatamente, sin ninguna animación, ya que lo que hace jQuery es cambiar la propiedad CSS display de ese elemento, alternando entre display:none y display:block.

Pregunta: ¿Cómo puedo mostrar y ocultar elementos en mi web? (ver respuesta)

Ejemplo 2: Mostrar y ocultar con animación

Para darle un poco más de vida al ejemplo anterior, podemos animar la aparición del bloque definiendo la velocidad con la que queremos que se abra y se cierre.

El método .toggle() anima simultáneamente la altura y la anchura del elemento, por eso la animación se produce en oblicuo, no hacia abajo.

Pregunta: ¿Es complicado animar un bloque con .toggle()? (ver respuesta)

Ejemplo 3: Mostrar y ocultar un vídeo

Lógicamente, en el bloque de contenido oculto podemos incluir cualquier cosa, no sólo texto. Por ejemplo, podemos utilizarlo para mostar un vídeo:

Mostrar vídeo

Ejemplo 4: Alternar visibilidad de varias preguntas y respuestas

Supongamos ahora que tenemos varias preguntas y respuestas. Si en vez de abrir y cerrar un bloque (una respuesta) tenemos varios, tendremos que cambiar un poco el código para que no se abran todas las respuestas a la vez.

En este caso, una de las maneras de conseguirlo sería especificar que se abra únicamente el párrafo siguiente utilizando .next():

Pregunta 1: ¿Dónde puedo encontrar más información sobre .next()? (ver respuesta)

Pregunta 2: ¿Cómo puedo acceder al código de este ejemplo? (ver respuesta)

Pregunta 3: ¿Cómo puedo abrir y cerrar todo a la vez? (ver código)

Mostrar y ocultar todas las respuestas

Ejemplo 5: Cambiar el texto del botón al pulsar sobre él

En los ejemplos anteriores, el texto del botón o enlace que activa la acción de mostrar y ocultar no cambia, lo cual puede confundir al usuario. Al pulsar sobre «Ver vídeo», «Leer más», etc. el texto debería cambiar automáticamente por «Ocultar vídeo», «Colapsar texto» o cualquier descripción que tenga sentido.

Para ello podemos utilizar el método .text(), que se encargará de sustituir el texto del elemento por el que especifiquemos.

Además, en este ejemplo utilizamos .toggle() para alternar dos funciones, ya que lo que queremos no es cambiar una vez el texto sinó alternar entre dos cadenas.

Pregunta: ¿Cómo puedo cambiar el texto de un botón con jQuery?

Ver respuesta

Ejemplo 6: Abrir y cerrar un panel lateral

Como hemos visto en el ejemplo anterior, el método .toggle() nos permite también alternar funciones al pulsar sobre un elemento. La primera función se activa al pulsar por primera vez (y la tercera, quinta…), mientras que la segunda tendrá efecto la segunda vez que pulsamos el botón (y la cuarta, sexta…). Un ejemplo práctico de esto sería mostrar y ocultar un panel lateral:

Mostrar el panel oculto

Este sería el código necesario:

<!-- HTML -->
<div id="panel-oculto" style="display:none;"></div>

<a href="#" id="alternar-panel-oculto">Mostrar el panel oculto</a>
// jQuery
$(document).ready(function(){ 

	$('#alternar-panel-oculto').toggle( 

	    /* 
	    	Primer click.
			Función que descubre un panel oculto
			y cambia el texto del botón.
	    */ 
	    function(e){ 
	        $('#panel-oculto').slideDown();
	        $(this).text('Cerrar el panel');
	        e.preventDefault();
	    }, // Separamos las dos funciones con una coma
	
	    /* 
	    	Segundo click.
			Función que oculta el panel
			y vuelve a cambiar el texto del botón.
		*/
	    function(e){ 
	        $('#panel-oculto').slideUp();
	        $(this).text('Mostrar el panel oculto');
	        e.preventDefault();
	    }

	);

});

Ejemplo 7: Combinando jQuery y WordPress

Estos efectos se pueden combinar con otras maneras de ocultar información, por ejemplo, si utilizamos WordPress, haciendo que sólo tengan acceso al elemento oculto los usuarios registrados.

Si añadimos un condicional en el bloque con la información oculta, podemos hacer que sólo sea accesible para usuarios registrados, para administadores, para usuarios específicos, etc:

Ver contenido premium (sólo usuarios registrados)

<?php 
if ( is_user_logged_in() ) :

	// Contenido premium, solo para usuarios registrados	

else :

	// Mensaje para los que no pueden ver el contenido anterior
	echo 'Lo sentimos, este contenido sólo está disponible para usuarios registrados :-(';

endif;
?>

Entrada relacionada: Cómo animar enlaces internos con jQuery (con y sin WordPress)

Comentarios

¿Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.