Menú Cerrar

Ocultar y Mostrar DIV con codigo HTML y JavaScript

JS HTML CSS

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>


Te invitamos a visitar nuestros canales en y Suscribirte



Suscríbete por correo electrónico

Recibe notificaciones de Spek Regg

Únete a otros 31 suscriptores


Publicado en Soporte Tecnico

Te puede interesar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *