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.
49 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’;
};
}
Gracias Martín, me fue muy útil tu función.
Saludos
Martín podrías ponerme todo el código que usas por favor, incluyendo el html, es que tengo varios div probablemente sean como 50 y he tratado de aplicar la función que utilizas pero a lo mejor estoy haciendo algo mal, por favor ayúdame.
Mi correo es yomy.yom@gmail.com
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
Hola! Tengo el mismo problema de Angel.
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
Hola Ricardo:
Si bien no la manejo tanto como pasarte un script funcionando, en JQuery hay una función FadeTo que te podría servir, al igual que FadeIn y FadeOut.
gracias siempre se agradece!
muchas gracias por enseñarme a ocultar divs, que la fuerza te acompañe amigo
Hola, por favor necesito una ayuda en:
Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. He tratado de adpatar lo de ocultar el div pero no me ha salido. Llevo varios dias en esto y no he podido solucionarlo.
Muchas gracias
Hola, te explico mejor:
Por favor, necesito una ayuda en:
Quiero lograr mostrar/ocultar una imagen al marcar/desmarmar una casilla de verificacion. Llevo varios dias en esto y no he podido solucionarlo. He intentado muchas cosas, pero hasta ahora solo he logrado presentar la imagen oculta pero al marcar la casilla no se habilita la imagen.
En terminos de programacion escrita, te diria, que necesito:
evento 1: mostrar casilla verificacion + texto + imagen (hidden, sin href);(esto lo he logrado).
evento 2: si la casilla de verificacion es “true” mostrar evento 3 y si es “false” mostrar evento 1.
evento 3: mostrar imagen “visible” + href
Muchas gracias
Grande, era lo que necesitaba
Este codigo esta buenisimo !
Muchas Gracias …
Funciono a la perfeccion, pero tengo una pregunta, es que necesito que en ves de que me salga texto, me salga un cuadro pequeño que valla ingresando text, select, etc, es decir, estoy manejando una base de datos y necesito que cuando en el formulario le den clic en por ejemplo “mas” entonces me cargue mas funciones del formulario.
Agradeceria si me ayudan por fa !
Simplemente, poné el formulario dentro de un DIV oculto y listo. Cuando pongan más, lo mostrás.
En poco tiempo, voy a ponerlo con jquery, para que se noten algunos “efectos” que son mejores.
gracias, justo lo que estaba buscando
Hola señores,
tengo un problema con una lógica para ocultar y mostrar Divs dependiendo de la opción que seleccione de un combo.
En mi combo tengo 4 opciones, cada una debe mostrar campos diferentes … por favor pido ayuda para ver si hay alguien que haya realizado algo igual o parecido
les agradesco de antemano!
por favor respondanme
Gracias, me ayudo, muy buenos los comentarios
Me ha servido de mucho. Yo tambien tengo el caso de querer mostrar/ocultar varios div…en mi caso 3 divisiones…finalmente lo que hago al hacer clic en el menu es ocultar las tres y mostrar la seleccionada
function mostrardiv(divisionamostrar) {
div = document.getElementById(‘inicio’);
div.style.display=’none’;
div = document.getElementById(‘contacto’);
div.style.display=’none’;
div = document.getElementById(‘nosotros’);
div.style.display=’none’;
div = document.getElementById(divisionamostrar);
div.style.display=’’;
}
el código desde los enlaces de navegación es
Inicio
Contacto
Nosotros
la idea es sencilla pero práctica. por su puesto inicialmente la division ‘inicio’ esta visible.
En mi caso me sirve porque no hay demasiado contenido en nosotros y contacto.
Hola Jesús, tu ejemplo es lo que estaba buscando pero algo estoy haciendo mal..
Es posible que postees o me envies el código?
elserchi@gmail.com
Estaría genial, gracias!
Mi caso es utilizando una lista de menú de dos opciones, para la primera que el formulario quede como esta, pero para la segunda opción se debe mostrar un div con 4 campos adicionales para realizar un ingreso.
Si alguien sabe como hacer que esto funcione, pos una manito =) gracias de ante mano!
Hola, tengo un sidebar y quiero hacer que cuando haga click a uno, se cierre la información que mostraba el link anterior.
Cómo lo p uedo hacer?
gracias funciona todo
justo lo que buscaba, exelente aporte!!!!
Gracias
che no es mas facil con
function mostrardiv() {
$(‘#flotante’).show();
}
function cerrar() {
$(‘#flotante’).hide();
}
Cesar, obviamente usando Jquery es más sencillo, pero este ejemplo, no utiliza Jquery.-
Excelente informacion, mas bien si quieres enviar desde un combo tendria que usarlo en el evento onchange? y como podria enviarle el valor de la seleccion del combo?
Muy bueno, se pueden hacer cosas muy interesantes con esta informacion
Me viene de diez, muchas gracias. Voy a recomendar la web, muy buena
Muy buen ejemplo. Pero tengo una pequeña duda.
Estoy intentando integrarlo en un combobox y dependiendo de lo elegido que me muestre una capa y oculte las demas.
El código de mi combo es:
Seleccione opción…
A Coruña
Lugo
Ourense
Pontevedra
¿Como tendría que dejar el script?
function muestradiv(provincia.value) {
var n = provincia.value;
div = document.getElementById(‘flotante’+n);
div.style.display = ”;
}
Asi no me funciona. que me falta
justo lo q buscaba muchas graciasss
GRACIAS ME sirvio de mucho
Gracias!!! Muy util el post
preciso! Gracias