Estoy creando un sitio web y tengo un pequeño problema con los interruptores de palanca.
Construí mi botón de alternar pero quiero agregar una función para intercambiar contenido.
Quiero agregar 2 contenidos y son muy fáciles pero no pude hacerlo. Cuando se alterna a la derecha, quiero mostrar un texto en div que dice "Hola" y cuando se alterna a la izquierda, quiero mostrar un texto nuevamente que dice "Adiós". ¿Qué debo agregar?
¿Cómo puedo hacer que esto suceda?
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #E21C90; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; background-color: #E21C90; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } <label class="switch"> <input type="checkbox" checked> <span class="slider round"></span> </label>Para hacer lo que necesita, conecte un controlador de eventos a la input de la casilla de verificación y luego alterne la configuración de display de los elementos principales de los controles deslizantes según el estado de esa casilla de verificación. Tenga en cuenta que en este ejemplo utilicé elementos div como padres, pero cualquier elemento a nivel de bloque funcionaría.
let mainContent = document.querySelector('#main_content'); let secondaryContent = document.querySelector('#secondary_content'); document.querySelector('.switch input').addEventListener('change', e => { mainContent.style.display = e.target.checked ? 'block' : 'none'; secondaryContent.style.display = e.target.checked ? 'none' : 'block'; }); .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #E21C90; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; background-color: #E21C90; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } #secondary_content { display: none; } <label class="switch"> <input type="checkbox" checked> <span class="slider round"></span> </label> <div id="main_content">Slider 1</div> <div id="secondary_content">Slider 2</div>