Solution:1
To do what you require hook an event handler to the checkbox input
and then toggle the display
setting of the parent elements of the sliders based on the state of that checkbox. Note that in this example I used div
elements as the parents, but any block-level element would work.
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>