Mostrar y ocultar un elemento con CSS esquivando jQuery.
Como hacer que un elemento aparezca y desaparezca desde un lado de la pantalla solo con CSS.
Como frontend hay veces que por exigencias del guion nos vemos en la tesitura de no poder usar jquery, ya sea por no saber usarlo, porque el cliente no quiere, por cuestiones de rendimiento, … En este artículo se explica un truco para poder hacer que un elemento aparezca de uno de los lados.
Son dos las condiciones que necesitamos para este truco, la primera y la mas obvia es saber CSS, y la otra, la que nos va a dar toda la lógica, es el combinado de un <label> con su atributo “for” y un <input type=”checkbox” con su “id”.
Por un lado pondremos la label en donde nos interese dentro de nuestro html y la maquetaremos para que tenga el aspecto de botón que queremos. Por otro lado, y este es uno de los puntos importantes a tener en cuenta, pondremos el checkbox justo por delante del div o el tag que vayamos a hacer que entre y salga de la pantalla.
Ahora toca dejar esto visualmente listo para que haga su magia.
Por un lado debemos poner el body con “overflow: hidden;”, también valdría hacerlo sobre un contenedor que encapsule tanto al checkbox como al div que le acompaña.
El checkbox lo maquetaremos de la siguiente manera:
.view-option-anchor{
display: inline-block;
width: 0;
height: 0;
opacity: 0;
visibility: hidden;
}
Es importante que no pongamos “display: none;“ ya que aunque no lo veamos es indispensable que este dentro del documento.
Ahora vamos con la caja que queremos que se oculte y se muestre, en este caso es el div con la clase “filter-content”.
Para ello lo que vamos a hacer es maquetarlo, posicionándolo para que posteriormente nos aparezca desde el lado derecho de la pantalla.
. filter-content{
height: 100vh;
width: 100 vw;
position: fixed;
top: 0;
left: 100%;
z-index: 9999;
transition: left 0.4s ease;
}
Bien, ahora ya está colocado cada elemento donde debe estar en su posición inicial. En este caso no veremos el div “filter-content” porque sobresale de la ventana por la derecha. Para verlo, y aquí es donde está la magia, no ayudaremos de su posición con respecto el checkbox de la siguiente manera.
.view-option-anchor:checked + .filter-content{
left: 0;
}
De esta forma haremos que el div que está justo al lado de checkbox entre dentro de la pantalla.
Por último, para hacer totalmente usable este elemento que sale y entra de la pantalla, necesitaremos un botón de cierre, o más bien un nuevo <label> en el que su “for” apunte también al “id” de este checkbox y que se encuentre dentro de el div que entra y sale. Con lo que la estructura html nos quedaría así:
Y con esto tendríamos la funcionalidad completa. Todo lo referente al aspecto de estos label como botones queda en tu mano para ponerlos a tu gusto.
Esta forma de usar el checkbox puede aplicarse a diferentes situaciones, la única condición es usar y posicionar los elementos de la forma descrita, así que toca experimentar todo lo que se te ocurra.
Y esto ha sido mostrar y ocultar un elemento con CSS, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.
