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 eventoonclick, 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 eventosonmouseover yonmouseout 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 HTMLinput del tipocheckbox 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 uninput, seguida su etiquetalabel que hará las veces de botón y justo a continuación, dentro de una cajadiv, 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 otrosspoilers 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 unfiltro para atributos con el fin de que el estilo se aplique sólo a losinput 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 uninput está seleccionado. Cuando eso ocurre, a sus hermanos adyacentes que encontramos con+, le aplicamos otro estilo y listo. En este caso lo mostraremos inicialmente conopacity: 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"] + label + .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 elinput para que el botón radio no se vea y lo siguiente, menos relevante, es dar estilo a la etiquetalabel 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 olabel cuando suinput 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 uninput[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 correspondienteinput 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éisun 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 elspoiler 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 parinput-label asociados.

Spoiler 2

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