I want to add some functionality on toggle button change. Currently it has no functionality in toggle change. I want a method that will be called on toggle change and do some work if it is off and if it is on. I want to show and hide some link under toggle change. I have attached the sample code (CSS and HTML). Please some one help me to write the syntax.

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.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: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

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%;
}

<h2>Toggle Switch</h2>
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

I want to add some functionality on toggle button change. Currently it has no functionality in toggle change. I want a method that will be called on toggle change and do some work if it is off and if it is on. I want to show and hide some link under toggle change. I have attached the sample code (CSS and HTML). Please some one help me to write the syntax.

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.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: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

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%;
}

<h2>Toggle Switch</h2>
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

• javascript
• jquery
• html
• css

• 2 If you're doing this in jQuery, you can use the $('selector').change() method to watch for changes to the checkbox and show() and hide() to show/hide your other element. Give it a try, if you get stuck we can help with the specifics :) – delinear Commented Nov 9, 2017 at 17:18
• 1 You can use jQuery . It is very easy. Stackoverflow is not a place where people write code for you. People only can help you. So, you should be try first. – acoder Commented Nov 9, 2017 at 18:04
• Hi, you can try from this: kevinleary/jquery-checkbox-checked – acoder Commented Nov 9, 2017 at 18:06

2 Answers 2

You can use plain javascript by putting an onchange function on the input checkbox and toggling the links display property. The function below looks at the checkbox whenever it is click and if it is checked, will display the link as block, and if it is unchecked, it will display the link as none (hide it).

function toggleCheck() {
  if(document.getElementById("myCheckbox").checked === true){
    document.getElementById("aLink").style.display = "block";
  } else {
    document.getElementById("aLink").style.display = "none";
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.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: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

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%;
}

<h2>Toggle Switch</h2>
<label class="switch">
  <input type="checkbox" id="myCheckbox" onchange="toggleCheck()" checked>
  <span class="slider round"></span>
</label>
<a id="aLink" href="" style="display:block;">Link</a>

$('#toggle').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('#link').show();
    } 
    else {
        $('#link').hide();
    }
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.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: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

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%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Toggle Switch</h2>
<label class="switch">
  <input id="toggle" type="checkbox" checked>
  <span class="slider round"></span>
</label>
<br/>
<a href="www.stackoverflow." id="link">Link</a>