How to change content with toggle button with html css and js-CodePudding

I am building a website and am having a little issue with toggle switches.

I've built my toggle button but I want to add a function to swap contents.

I want to add 2 contents and they are really easy but I could not make it. When toggled right i want to display a text in div which says "Hey" and when toggled left i want to display a text again which says "Bye". What should i add?

How can I make this happen?

.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 >
  <input type="checkbox" checked>
  <span ></span>
</label>

CodePudding user response：

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 >
  <input type="checkbox" checked>
  <span ></span>
</label>

<div id="main_content">Slider 1</div>
<div id="secondary_content">Slider 2</div>