how to add a href link to a toggle button?

Question

I have a toggle button, in which i would like to add a href link to it, so that when i point the toggle button to left it should open a link and vice versa..

so far this is my code::

<html>
<head>
<style>
.switch {
position: fixed;
display: block;
width: 65px;
height: 34px;
top: 34px;
left: 42.5%;
z-index:2;
}

.switch input {display:none;}
.slider {
position: absolute;


cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3498DB;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -o-transition: .4s;
  -ms-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 6px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
    -moz-transition: .4s;
      -o-transition: .4s;
        -ms-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #3498DB;
}

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

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  -moz-transform: translateX(26px);
  -o-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 60%;
}
</style>
</head>
<body>
<label class="switch">
    <input type="checkbox">
        <div class="slider round"></div>
</label>
</body>
</html>

Any help would be greatly appreciated..

score 0 · Answer 1 · edited May 23 '17 at 12:32

I am not a css expert. In javascript we can give you a solution like this. You can bind an event for on click. in onclick function you can check whether has that unique class will help you to easily identify left for right.

<input type="checkbox" onclick="loadNewPage();">

javascript function is like this. You need to change your element ID and class names.

function loadNewPage()
{
    //FOR THIS SOLUTION YOU NEED TO HAVE A UNIQUE CLASS OR CLASS COMBINATION TO IDENTIFY COMBINATION
    if($('#ELEMENT_ID').hasClass("SPECIFIC_CLASS_NAME")){
        window.location.replace('/admin-check/customer/customerData');
    }
}

For CSS solution please go through this SO answers

Make a div into a link

a href link for entire div in HTML/CSS

how to add a href link to a toggle button?

1 Answers1