Controlar divs con radio buttons mediante html5/css3

Como vimos en un artículo anterior, con HTML5 y CSS3 se pueden realizar todo tipo de animaciones; en este artículo veremos como hacer aparecer y desaparecer elementos HTML controlando qué radio button está seleccionado.

Veamos el HTML:

<div class="container">
  <p>Si pulsamos sobre el checkbox veremos como sale un div de la parte derecha de la pantalla.</p>
  <p>Si volvemos a pulsar sobre él, o sobre cerrar dentro del div, el contenedor se enconderá</p>
  <div>
    <input type="radio" id="control-div-1" name="controlar-divs">
    <label for="control-div-1">Controlar div 1</label>
    <div class="container-animacion-1">
      <p>div a controlar</p>
    </div>
  </div>
  <div>
    <input type="radio" id="control-div-2" name="controlar-divs">
    <label for="control-div-2">Controlar div 2</label>
    <div class="container-animacion-2">
      <p>div a controlar</p>
    </div>
  </div>
  <div>
    <input type="radio" id="control-div-3" name="controlar-divs">
    <label for="control-div-3">Controlar div 3</label>
    <div class="container-animacion-3">
      <p>div a controlar</p>
    </div>
  </div>
		
</div>

Este caso creamos los radios con el mismo «name» ya que queremos que sólo pueda estar activa una opción.
Cada label y radio tiene justo debajo su correspondiente contenedor a controlar. Este contenedor tiene que ser hermano o hijo del input type radio.

Para efectos más complejos, los radios se pueden sacar fuera y poner donde se requieran o incluso ocultarlos. El único requisito para que funcione es que los contenedores o elemntos a controlar sean o hermanos o hijos de los radios.

Veamos el CSS:

.container-animacion-1{
  position: fixed;
  width: 150px;
  top:0;
  right: -160px;
  bottom: 0;
  background: orange;
  transition:0.2s ease;
}
.container-animacion-2{
  position: fixed;
  width: 150px;
  top:0;
  right: -160px;
  bottom: 0;
  background: blue;
  transition:0.2s ease;
}
.container-animacion-3{
  position: fixed;
  width: 150px;
  top:0;
  right: -160px;
  bottom: 0;
  background: green;
  transition:0.2s ease;
}
#control-div-1:checked ~ .container-animacion-1{
  right: 0
}
#control-div-2:checked ~ .container-animacion-2{
  right: 0
}
#control-div-3:checked ~ .container-animacion-3{
  right: 0
}

Simplemente le damos estilos a los contenedores y lo ubicamos fuera de la pantalla. Simplemente luego se controla qué radio está checked, y le damos un «right:0» para que se posicione a la derecha de pantalla.

Los selectores que se suelen utilizar (sin ellos no funciona) son:

• ~ : hermano
• > : Hijo

Os dejo aquí la demostración, y una implementación en un proyecto real.

En este proyecto real, los radio están ocultos y jugamos con los label; le damos diferente apariencia dependiendo de qué radio está checked. A parte de esto, controlamos qué información mostrar dependiende de qué año (label/radio) esté seleccionado.