Desplegar y plegar con un clic usando CSS. Crear spoilers con INPUT

Para ocultar elementos de una página y hacerlos aparecer (o viceversa) a voluntad, lo más socorrido es usar JavaScript. Con este lenguaje podemos controlar fácilmente gracias al evento onclick, cuándo algo es pulsado y en ese momento llamar a una función que haga un cambio de clase/estilo para hacer visible o invisible el elemento en cuestión (1) (2) (3). También tenemos los eventos onmouseover y onmouseout que a su vez nos permiten detectar si el puntero pasa por encima de algo o si al contrario, se quita de encima.

Sin embargo, con CSS lo único que podemos controlar actualmente es esto último de pasar el puntero. Se hace usando el pseudoelemento :hover y ya hemos visto por aquí algunos ejemplos sencillos y otros un poco más sofisticados (1) (2).

Pero como decía, no hay nada en CSS que sirva para el clic. Nada que sea directo claro, porque indirectamente sí que tenemos al menos un sistema. Lo vemos.

La clave es usar la etiqueta HTML input del tipo checkbox que es la que se usa para botones radio en formularios y en la que sí se puede controlar mediante CSS cuando está clicada (realmente, seleccionada) gracias a la pseudoclase CSS :checked.

Para poder manejar cómodamente con CSS todo esto, la cosa comienza con incluir en el HTML un input, seguida su etiqueta label que hará las veces de botón y justo a continuación, dentro de una caja div, el elemento que será mostrado/ocultado con el clic en el anterior.

Con lo único que hay que tener cuidado es con que cada par input-label tengan la misma ID y sobre todo, que si usamos en la misma página otros spoilers de este tipo, la ID vaya siendo distinta.

<input type="checkbox" id="spoiler1"></input>
<label for="spoiler1">SPOILER</label>
<div class="spoiler">CONTENIDO OCULTO</div>

OTRO TIPO DE CONTENIDO
<input type="checkbox" id="spoiler2"></input>
<label for="spoiler2" >SPOILER</label>
<div class="spoiler">CONTENIDO OCULTO</div>
OTRO TIPO DE CONTENIDO

Ya metidos en el CSS, para los distintos selectores usaremos un filtro para atributos con el fin de que el estilo se aplique sólo a los input cuyo id empiecen por "spoiler" [id^="spoiler"] y que no afecte a otros que pudiera tener la página para otros fines.

Pero la clave de todo está en poder detectar con :checked, cuando un input está seleccionado. Cuando eso ocurre, a sus hermanos adyacentes que encontramos con +, le aplicamos otro estilo y listo. En este caso lo mostraremos inicialmente con opacity: 0 y con el clic lo pasaremos a opaco total para hacerlo visible.

Este sería el código básico para conseguir todo esto:

/* Ocultar botón radio */
input[id^="spoiler"]{
display: none;
}
/* Estilo botón clicable */
input[id^="spoiler"] + label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: #e1a;
cursor: pointer;
}
/* Estilo botón cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label {
color: #333;
background: #ccc;
}
/* Estilo caja SPOILER (inicialmente oculto) */
input[id^="spoiler"] ~ .spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
/* Estilo caja SPOILER cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
opacity: 1;
}

Como veis, en primer lugar ocultamos el input para que el botón radio no se vea y lo siguiente, menos relevante, es dar estilo a la etiqueta label que servirá de botón.

Con la tercera regla empieza el truco, aunque de momento sólo nos sirve para cambiar el aspecto del botón o label cuando su input precedente está seleccionado, en el ejemplo con un cambio de color.

Digo que aquí empieza el truco porque aunque esto no oculta ni revela nada, ya se puede ver cómo se controla eso. Podéis ver un input[id^="spoiler"]:checked + label que traducido quiere decir "selecciona los INPUT con una ID cuyos primeros caracteres sean SPOILER y si están seleccionados (CHECKED), a la etiqueta LABEL que hay justo a continuacion dale las siguientes propiedades..."

De la misma manera, las dos últimas reglas nos sirven para dar estilo a la caja marcada con clase .spoiler. La penúltima para que inicialmente no se vea y la última para que se haga visible cuando su correspondiente input está pulsado.


Realmente a veces no sé si mis explicaciones sirven para aclarar o para confundir más, pero si es lo segundo, en este enlace tenéis un desarrollo en CodePen para que podáis experimentar y que además incluye algo de estilo extra para dejar todo el conjunto más mono... tal que así:

Spoiler 1

Esta es una manera de ocultar cierta información hasta que el usuario hace clic en un botón para visualizarla. Con un segundo clic el spoiler se pliega de nuevo y vuelve a no ser visible.

Y sin ningún problema permite añadir varios botones y contenidos de este tipo simplemente cambiando el valor de la ID de cada par input-label asociados.

Spoiler 2

Lo que ha sufrido Brasil en este pasado mundial de fútbol...

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter