Número de lecturas: 264
{lang: 'es-419'}

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:

<div id="element" style="display: none;">
   <div id="close"><a href="#" id="hide">cerrar</a></div>
   Este es un div ocultar
</div>

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

<a href="#" id="show">Mostrar</a>

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.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("#element").hide();
  });
  $("#show").click(function(){
    $("#element").show();
  });
});
</script>

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

Be Sociable, Share!