jQuery / .show() y .hide()

B()ienvenidos sean a este post, hoy veremos como se pueden mostrar o esconder elementos de la pagina.

En posts anteriores ya hemos visto como esconder elementos mediante el metodo hide pero tambien disponemos del metodo show para mostrarlo, si bien estos son solamente atajos para la siguiente instruccion:

objeto.css('display','valor');

Siendo valor el relacionado a display para mostrarlo como queremos, el metodo hide envia el valor none a display de manera automatica, en cambio show vuelve para atras la accion realizada por hide, vamos a trabajar un poco con este tema, vamos a ver un ejemplo pero necesitaremos el codigo que vimos en el post anterior, en caso de no tenerlo descarguen el siguiente archivo:

Extraigan todos los archivos en un directorio, nuestro siguiente paso sera ir al archivo libro.html donde agregaremos un nuevo div entre el prefacio y el capitulo:

<div class="capitulo" id="enlace">
	<a href="#" class="mas">Mostrar mas</a>
</div>

Este es un simple div donde contendremos un mensaje con un link que por el momento no tendra otra accion, recuerden que debe estar entre el div llamado prefacio y el otro llamado cap-1, nuestro siguiente paso sera ir al archivo estilo.css y agregaremos el siguiente bloque de codigo:

a {
   color: #06581f;
}

#cap-1 {
	display: none;
}

Estos son dos estilos que aplicaremos a nuestra pagina, el primero sera para cambiar el color del enlace que creamos anteriormente, el segundo se encarga de ocultar el div que tenemos para el capitulo 1, por lo tanto con esto nuestra pagina quedara de la siguiente forma

Como pueden ver ahora solo tenemos el prefacio pero no el capitulo 1, nuestro siguiente paso sera ir al archivo codigo.js y agregaremos el siguiente codigo:

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

De vuelta esperamos a que la pagina este cargada, en ella asociaremos el evento click al link, la primera accion es asociar al evento la funcion preventDefault para evitar que el link haga su conducta habitual, la siguiente linea se encarga de mostrar el texto que escondimos por medio de show y lo siguiente es esconder el enlace que simula el reemplazo, con todo esto comentado veamos como funciona mediante el siguiente video

Como pueden ver podemos hacer de forma muy simple un efecto de seguir mostrando mas contenido en la pagina, si bien ya hemos visto como trabaja hide ahora agregamos a show que hace lo contrario del anterior, para finalizar les dejo los codigos finales en este post:

En resumen, hoy hemos visto a los metodos show y hide, las cuales muestran y esconden elementos respectivamente, como son, que hacen realmente, como trabajan y un ejemplo simple para verlos en accion, 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.