Ocultar y mostrar DIV con javascript

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.
Para esto utilizamos Javascript y CSS para lograr nuestro proposito.
Lo mismo sería con divs flotantes sólo que a los mismos hay que colocarles diferentes funciones javascript y su posición deberá ser absolute o relative dependiendo de lo que busquemos.

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

Luego debemos realizar dos funciones en javascript para mostrar y ocultar dicho div respectivamente.

<script>

function mostrardiv() {

div = document.getElementById(‘flotante’);

div.style.display = ”;

}

function cerrar() {

div = document.getElementById(‘flotante’);

div.style.display=’none’;

}

</script>

Una vez hecho esto, tenemos las funciones en javascript que mostrarán y ocultarán el div cuando el usuario haga click en una imagen o un texto con el link a la función, como en el siguiente ejemplo:

<div id=”mostrarDiv”><a href=”javascript:mostrardiv();”>Mostrar Div</a></div>
<div id=”flotante” style=”display:none;”> Este es un div oculto <br><a href=”javascript:cerrar();”> presiona aquí para cerrar</a> </div>

Acá tienen el ejemplo para verlo más claramente, si quieren pueden copiar el código fuente.

• Post relacionados
• Bookmark
• Tags

6 comentario to “Ocultar y mostrar DIV con javascript”

1. ed cross says:

   22/01/2010 at 9:58 PM

   muchas gracias me a servido de mucho, gracias nuevamente

   Reply
2. Cesar says:

   01/02/2010 at 12:48 PM

   Hola, bueno elejemplo pero como lo harias si tienes varios div similares y que cada vez que abras uno se cierre el anterior automaticamente, es decir siempre visible solo 1, sin tener que usar un boton o link cerrar, gracias

   Reply
3. admin says:

   02/02/2010 at 3:50 PM

   ¿Tendrías la maquetación?
   En el caso que planteás, utilizaría JQUERY para abrir y cerrar los divs, con la función FIND.
   Pero sería bueno me entregues una maquetación HTML, la veo y te entrego el código.

   Reply
4. Jef says:

   18/02/2010 at 3:36 PM

   Me parece interesante, pero, ¿cómo lograr hacerlo que al dar clic en otro vínculo, el abierto se cierre automaticamente y muestre la información del otro, sin poner… “clic aquí para cerrar” o esas cosas?… Saludos!!!

   Reply
5. Martin Graglia says:

   19/02/2010 at 12:32 PM

   Buenisimo tu ejemplo! Solamente le agregué un par de cositas, que me resultaban prácticas a mi:

   _ le paso el nombre del div como parámetro, porque yo tengo 3 DIVs que usan esta función en mi página.

   _ le agregué un IF para usar los botones como “switch”: con un clic muestra el DIV, con el siguiente lo oculta.

   Copio el código, por si a alguien le resulta útil (tampoco es una maravilla, jeje)

   function showDiv(quien) {
   div = document.getElementById(quien);
   if(div.style.display == ‘block’){
   div.style.display = ‘none’;
   }else if(div.style.display == ‘none’){
   div.style.display = ‘block’;
   };
   }

   Reply
6. admin says:

   21/02/2010 at 3:29 AM

   Jef, podrías hacer una función que lo incluya, yo ahí te recomiendo Jquery, así hacés un find.

   Voy a poner más ejemplos en otro post para que quede en claro cómo usar Jquery, que es un tanto mejor, este es un básico ejemplo.

   Martin, me parece buen ejemplo para poder ocultar ó mostrar un div sin necesidad de tener un botón de cerrado.

   Sin embargo, vuelvo a recomendar Jquery, y postearé un ejemplo a la brevedad!

   Reply