Mostrar y Ocultar Div con JavaScript y CSS3

Después de utilizar esta técnica para la opción de login de nuestra pagina Azul Web me decidí por compartirles como se hace para poder mostrar un div oculto con una pequeña transición utilizando JavaScript y CSS3, también me tome la tarea de hacer un ejemplo con solo CSS3, veamos uno por uno.

Aquí puedes ver los demos Mostrar y Ocultar Div con JavaScript y CSS3

Mostrar y Ocultar Div con JavaScript y CSS3

Primero debemos de tener nuestra esturara HTML donde existirá un botón que activara una función JavaScript que hará el cambio del CSS para mostrar el efecto.

<div id="boton" onclick="divLogin()">
Mostrar/Ocultar
</div>
<div id="caja">
</div>

Después de tener estos dos div utilice algo de CSS3 para darle el diseño y logar el efecto de transición.

#boton{
	padding: 10px;
	background: orange;
	width: 95px;
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0px 0px 1px #000;
	display: inline-block;
}

#boton:hover{
	opacity: .8;
}

#caja{
	width: 100%;
	margin: auto;
	height: 0px;
	background: #000;
	box-shadow: 10px 10px 3px #D8D8D8;
	transition: height .4s;
}

Vamos a centrarnos en las propiedades que son necesarias para el ejemplo, tenemos un div con un id  #caja, este div sera el que se ocultara y mostrara cada vez que demos un clic al div con el id #boton, vemos que el div caja tiene un width: 100%; esto significa que tiene el 100% del ancho y un height: 0px; este es el alto, tiene como valor inicial 0px esto significa que no tiene tamaño por eso no es visible al principio.

Notamos en el div botón esta parte onclick=”divLogin()”, esto ara que cada vez que le demos un clic a ese div se active la función JavaScript divLogin() que les mostrare mas adelante, lo que ara esta función es que cuando se corra cambiara la propiedad height: 0px; del div caja por height: 100px; haciendo que sea visible el div.

Si nosotros agregamos la propiedad de transición al div caja “transition: height .4s;” haremos que el cambio de 0px a 100px se retarde .4s logrando un bonito efecto. 

Código JavaScript

var clic = 1;
function divLogin(){ 
   if(clic==1){
   document.getElementById("caja").style.height = "100px";
   clic = clic + 1;
   } else{
       document.getElementById("caja").style.height = "0px";      
    clic = 1;
   }   
}

En esta parte yo me las he ingeniado para que en el primer clic el div apareciera y se mantuviera hasta que diera otro clic, para esto utilice un if que les explico a continuación;

Primer clic

En la primer linea de código declaramos una variable global clic, notamos que a esta misma le dimos el valor de 1, cuando damos clic el if pregunta si la variable clic es igual a 1 entonces cambia el height a 100px para mostrar el div, justo después de hacer esto le suma un 1 a la variable clic “clic = clic + 1;”

Esta linea de código es la que hace el cambio de la propiedad CSS; document.getElementById(“caja”).style.height = “100px”; , “caja” es el id que le puse al div, tendrás que colocar el tuyo.

Segundo clic

Recuerdan que en el primer clic le sumamos un 1 a la variable clic, ahora cuando demos otro clic el if preguntara lo mismo pero en este caso la variable clic ya no vale 1 si no 2 entonces se ejecutara la opción falso del if que es la que regresa a 0px el alto escondiendo de nuevo el div caja, justo después notamos que  regresamos a su valor original la variable clic clic = 1;, esto ara que todo empiece de nuevo 😀

Esta linea de código es la que hace el cambio de la propiedad CSS; document.getElementById(“caja”).style.height = “0px”; , “caja” es el id que le puse al div, tendrás que colocar el tuyo.

Mostrar y Ocultar Div con CSS3

Si no murieron a tratar de entender el ejemplo anterior pasemos al segundo ejemplo,  mucho mas sencillo.

En esta ocasión tenemos los mismos div con las mismas propiedades CSS;

<div id="boton" onclick="divLogin()">
Mostrar/Ocultar
</div>
<div id="caja">
</div>

#boton{
	padding: 10px;
	background: orange;
	width: 95px;
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0px 0px 1px #000;
	display: inline-block;
}

#boton:hover{
	opacity: .8;
}

#caja{
	width: 100%;
	margin: auto;
	height: 0px;
	background: #000;
	box-shadow: 10px 10px 3px #D8D8D8;
	transition: height .4s;
}

Ahora lo que aremos es agregar los 100px al alto cuando pase el puntero por encima, para esto utilizamos la propiedad hover sobre el div botón, notamos que ya tenemos esta linea de código CSS;

#boton:hover{
	opacity: .8;
}

Pero solo le agrega opacity: .8; que es transparencia, lo que tenemos que hacer es agregarle el alto, pero no al mismo div botón si no a la caja, para esto colocamos el siguiente código;

#boton:hover + #caja{
	height: 100px;
}

El código dice, cuando pases por el div boton “#boton:hover” cambia en el div caja “#caja” el alto a 100px “height: 100px;”.

Así de simple agregamos este efecto con CSS.

Clic aquí para descargar el código