mobile logo

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

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>

Solution:2

Using the click() method and text() method change the text or replace the text of button or a link.

When Hiding or Showing Div using onclick, on the same time and same click you can change the text of button or link depend on action? Using toggle method replace or change the text on same click. Change the text of a link when its clicked or change the text of a button when we click on the button.

HTML
<button>Show Div</button>

JavaScript
$(document).ready(function(){
    $("button").click(function(){
        $(this).text($(this).text() == 'Show Div' ? 'Hide Dive' : 'Show Div');
    });
});

Solution:3

$(function(){
$(“.pushme”).click(function () {
$(this).text(function(i, text){
return text === “PUSH ME” ? “DON’T PUSH ME” : “PUSH ME”;
})
});
})