Desarrollo web

Mostrar y ocultar contenido con hide y show

Una de las cosas que más nos interesan a los webmasters es realizar un sitio con contenido dinamico y que por sobre todo sea completamente atractivo para el usuario. En muchos casos hay información que no deseamos mostrar salvo que el usuario quiera verla (como comentarios), y debemos ocultar dicho div, y tan solo mostrarlo cuando él usuario desea.

En este artículo vamos utilizar las funciones jQuery hide() y show() + CSS para lograr este propósito.

Para mostrar y ocultar un div debemos instanciar un div con un ID único y en el estilo incluir style=”display:none;” por ejemplo:

el estilo incluir style=”display:none;” por ejemplo:

También deremos tener un link con id único también para invocarlo con jQuery con el objetivo de realizar la llamada a show().

Mostrar

Y en nuestro <head> deberemos incluir la librería jQuery + la lógica de mostrar y ocultar el contenido y algunos estilos para mejorar la presencia de los elementos.


Al hacer click en el elemento con id=”show” estamos llamando a la función show() de jQuery para mostrar el contenido que hay escondido en el contenedor con id=”element”.

Y si hacemos click en el elemento con id=”hide” estamos mandando a esconder el elemento con id=”element” utilizando la función hide() de jQuery.

Ejemplo del funcionamiento

 

Fuente:

jose-aguilar.com

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *