La semana en mi espejo retrovisor (VI)

Como diría Bernd Schuster, “No ase falta desir nada más”:

Espero que te resulten interesantes estos artículos que en mi opinión, son los más destacables de los que he escrito durante esta semana. El próximo domingo más y seguro que mejor.

Mostrar y Ocultar un DIV con jQuery

Es un proceso sencillo aunque para aquellos que se están iniciando en el mundo del diseño y maquetación de páginas web, aquí os dejo un pequeño truco para Mostrar y Ocultar un DIV mediante jQuery.

Código jQuery

Este es el código jQuery que incluye el evento de mostrar y ocultar con un efecto FadeIn y FadeOut. 

<script type=”text/javascript”>

$ (document) .ready(function(){

$ (“#botonocultamuestra”) .click(function () {

$ (“#divocultamuestra”) .each(function() {

displaying  = $(this).css(“display”);

if(displaying == “block”) {

$(this).fadeOut(‘slow,function() {

$(this).css(“displaying”,”none”);

});

} else {

$(this).fadeIn(‘slow’,function() {

$(this).css(“display”,”block”);

});

}

});

});

});

</script>

Después, sólo debemos incluir en nuestra página un objeto sea un enlace, imagen o botón de formulario para mostrar u ocultar el DIV. En este caso se trata de un enlace de texto:

  • <a href=”#” id=”botonocultamuestra”>Mostrar/Ocultar DIV</a>
  • <div id=”divocultamuestra” style=”display:none;”>Este es el DIV oculto</div>

Espero que sea de ayuda.