Switcher - Oxygenados La comunidad

En esta ocasión vamos a realizar un switcher con unas pocas líneas de código en JS, HTML y CSS. El código solo lo tendrás que copiar y pegar siguiendo las instrucciones.
Primeros pasos:

Crear dos divs a los que se les cambiará el id, a uno se le pondrá como id mensual y al otro anual.
Dentro de esos divs pondrás toda la información que desees y puedes darle todos los formatos que quieras, lo único que tienes que respetar es que tengan los ids mencionados.
Crear un Block Code y situarlo encima de los dos divs anteriores, copiar y pegar los códigos que abajo se ponen en su correspondiente sección del Block Code creado.

PHP / HTML

<div class="cambiador">
  <input type="checkbox" id="interruptor" class="check">
  <b class="b interruptor"></b>
</div>

CSS


.visible{
  visibility: visible;
}

.hide {
  display: none;
}

.cambiador {
  position: relative;
  width: 80px;
  height: 35px;
  /*border: 1px solid #000;	*/
  border-radius: 100px;
  /*Color Inicial fondo interruptor que se puede cambiar*/
  background-color: #aaaaaa;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}

.cambio_fondo{
	/*Color secundario fondo interruptor que se puede cambiar*/
    background-color:#000;
}

.check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}

.check:checked ~ .interruptor {
  right: 2px;
  left: 57.5%;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: .08s, 0s;
  /*Color secundario boton  interruptor que se puede cambiar*/
  background-color: #ffa900;
}

.interruptor {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 57.5%;
  /*Color inicial fondo interruptor que se puede cambiar*/
  background-color:#4353ff;
  border-radius: 36px;
  z-index: 1;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: 0s, .08s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {

    var interruptor = document.getElementById("interruptor");
    var TiMensual = document.getElementById("mensual");
    var TiAnual = document.getElementById("anual");	
	var TiFondo = document.getElementsByClassName("cambiador")[0];
 
        TiMensual.classList.add("hide");
		TiMensual.style.visibility = "visible";

   		interruptor.addEventListener("click", function () {
             TiMensual.classList.toggle("hide");
             TiAnual.classList.toggle("hide");
			 TiFondo.classList.toggle("cambio_fondo");
    })
});

Seleccionamos el div al que le habiamos dado el id de "mensual" y en el panel de herramientas de la derecha vamos a Advanced → Layout → Visibility → Y la establecemos en hidden

Nota: Se puede retocar el CSS del código del Bock Code, pero sin cambiar los nombres a las clases actuales.