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.
19 comentario to “Ocultar y mostrar DIV con javascript”
Deja un comentario
Encuesta
Loading ...
muchas gracias me a servido de mucho, gracias nuevamente
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
¿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.
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!!!
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’;
};
}
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!
Para cerrar el resto, es decir que sólo se mantega uno abierto es necesario un for que recorra los divs y los cierre o también pasar un segundo parámetro a la función que sería el div abierto, asi puedes cerrarlo!!
jeje un salud0o!
No, el for es consumista, mejor un “Find”
en jquery.
Saben como puedo cerrar u ocultar un div desde un .swf?
Para cerrar el div desde un .swf debes agregar esto:
AS2:
on(release) {
getURL(“javascript:cerrar();”, “_self”);
}
AS3:
boton_btn.addEventListener(MouseEvent.CLICK, cerrarDiv)
function cerrarDiv(e:MouseEvent):void {
navigateToURL(new URLRequest(“javascript:cerrar();”),”_self”);
}
Gracias me es de mucha utilidad. incluso en el div puedo incluir imágenes. y otras cosas gracias.
Alex: Deberías colocar el link a la función javascript en flash.
Te confieso que nunca había revisado JQuery, pero tu respuesta me llevó a hacerlo y quedé fascinado.
Ahora apoyo (con entusiasmo) tus recomendaciones de usar JQuery!
Es muy bueno, nadie sabe bien lo que hace, pero lo hace!
JQuery es interesante pero para la técnica SEO resulta un tanto deficiente.
por qué? yo creo que es al contrario, por ejemplo:
<a href="/donde-esta-wally-10" title="Donde está wally?" >Donde está wally?</a>
<div id="contenido">Acá el contenido del sitio</div>
<!-- Jquery -->
<script language="javascript">
$('a[rel="verOnAjax"]').click(function(){
$("#contenido").load($(this).attr('href')+"?only-data=yes");
return false;
});
</script>
Con ese sencillo código, lo que hacemos es:
A) Cargar el contenido con Jquery sin recargar la página (sólo trayendo los datos desde otra página) ;
B) Si el navegador no tiene Javascript activo, entonces te envia a otra página.
C) google detectará el link y todo funcionará correctamente.
De hecho, es una técnica para utilizar en SEO muy conveniente. y que deja resultados asombrosos
Generalmente, no es el lenguaje de programación lo que resulta ineficiente (no deficiente) sino el programador =)
Hola buen dia
Tengo un pequeño problema que no he podido resolver. Sucede que estoy realizando una pagina web en la cual necesito mostrar u ocultar bloques (divs) dependiendo de el boton que seleccione, algo como esto:
Boton_1 Boton_2 Boton_3 …. Boton_N
Inicialmente mantengo ocultos todos los divs, y al dar clic por ejemplo en el Boton_1 deberia mostrarse el bloque correspondiente, y luego al dar clic por ejemplo en el Boton_3 se deberia ocultar el div del Boton_1 y mostrarse el del Boton_3, y asi para cada uno de los botones.
Algo importante es que el número de botones que aparecen , se controlan de acuerdo a una consulta a la BD usando un bucle for, y es lo que me ha dado problemas al tratar de ocultar o mostrar los bloques, pues no puedo hacer estatica la funcion de javascript porque el numero de botones no siempre será el mismo.
Ya intente haciendo como Martin Graglia menciona pero no logre hacerlo funcionar.
Si hay manera de solucionarlo con JQuery me encantaria que me dijeran como, pues la verdad no estoy nada familiarizado con el.
Espero me puedan ayudar
Gracias
Amigos quisiera saber si alguien puede ayudarme, el DIV coon Javascript, me funcionó de maravilla, mi página toma el efecto sin problemas, pero quisiera saber si es posible que el efecto parta deswde el color negro, hasta que se vea mi página
gracias siempre se agradece!