jQuery / Alternar visibilidad

Bienvenidos sean a este post, hoy agregaremos una nueva funcionalidad a lo visto en los posts anteriores.

Hasta los posts anteriores hemos visto como aplicar algunos «efectos» a la hora de mostrar o esconder nuestros elementos pero siempre hemos realizado la accion de mostrar el elemento faltante, hoy veremos como podemos mejorar y dar la posibilidad de poder mostrar u ocultar un elemento, para ello necesitaremos el codigo del post anterior, en caso de no tenerlo les dejo a continuacion un link para poder descargarlo:

Simplemente extraigan el contenido del archivo en algun directorio y ya estaremos listos para comenzar a trabajar, nuestro primer paso sera ir al archivo codigo.js y modificaremos el siguiente segmento de codigo:

$(document).ready(function() {
	$('a.mas').click(function(evento) {
		evento.preventDefault();
		$('#cap-1').slideDown('slow');
		$(this).hide();
	});
});

De la siguiente manera:

$(document).ready(function() {
	var $capa=$('#cap-1');
	$('a.mas').click(function(evento) {
		evento.preventDefault();
		if ($capa.is(':hidden'))
		{
			$capa.slideDown('slow');
			$(this).text('mostrar menos');
		} else {
			$capa.slideUp('slow');
			$(this).text('mostrar mas');
		}
	});
});

Aqui mantenemos algo del codigo anterior pero agregamos otras, la primera es definir una variable la cual enlazara con nuestra capa del capitulo 1, despues asignaremos el evento click al link, dentro seguiremos usando a preventDefault para evitar que el link trabaje de manera predeterminada, ahora comenzamos con lo nuevo.

Agregaremos un condicional donde verificamos si la capa posee un valor igual a «:hidden«, debemos pasarlo asi para indicarle que es un valor de css, en caso de ser verdadero procedemos a «desenrollar» nuestra capa, tal como lo haciamos antes, pero ahora en lugar de esconder el link pasamos a cambiarle el texto, lo siguiente es un else donde haremos lo mismo pero de forma inversa, es decir «enrollaremos» la capa del capitulo y volveremos a modificar el texto para que sea como el inicial, por lo tanto ahora en lugar de ocultar el link solo lo cambiaremos para mostrar u ocultar el capitulo, veamos como trabaja ahora mediante el siguiente video

Como pueden ver logramos lo que comentamos anteriormente pero disponemos de otra funcion para poder hacer lo mismo, para ello tomemos el segmento anterior y modifiquemoslo de la siguiente manera:

$(document).ready(function() {
	var $capa=$('#cap-1');
	$('a.mas').click(function(evento) {
		evento.preventDefault();
		$capa.slideToggle('slow');
		var $link=$(this);
		if ($link.text() == 'Mostrar mas')
		{
			$link.text('Mostrar menos');
		} else {
			$link.text('Mostrar mas');
		}
	});
});

El comienzo sera similar a lo visto anteriormente pero despues del preventDefault vienen los cambios, primero aplicamos la funcion slideToggle para cambiar el estado de la capa, es decir si esta oculto lo mostrara y viceversa, despues definimos una nueva variable la cual enlazaremos con el link, luego tenemos un condicional donde a traves de la funcion text verificamos si el texto en el link es igual a «Mostrar mas», en caso de ser verdadero cambiaremos el texto a «Mostrar menos» y el else hacce lo mismo pero con el otro texto, si lo prueban hara exactamente lo mismo que vimos en el video anterior.

Esta es una mejor forma de poder mostrar u ocultar los elementos en nuestra pagina, antes de finalizar les dejo todo lo realizado en este ejemplo en el siguiente link:

En resumen, hoy hemos visto como alternar la visibilidad, al principio continuando con slideDown y slideUp, para luego hacerlo mediante una funcion mas simple como es slideToggle, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.