Change background color using toggle switch - javascript

<script>
document.getElementsByName("checkbox").onclick = function() {myFunction()};
function myFunction() {
document.body.style.backgroundColor = "black";
}
</script>
<style>
.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);
}
body {
background-color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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);
}
body {
background-color: red;
}
</style>
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label><br>
<script>
document.getElementsByName("checkbox").onclick = function() {myFunction()};
function myFunction() {
document.body.style.backgroundColor = "black";
}
</script>
</body>
</html>
I'm a bit of noob here, but I have this toggle switch that I want to change the whole body background which is currently red to black when I click it. But for some reason, my script doesn't work. Can someone explain what I'm doing wrong?

The problem your code has is the click event is not registered with the checkbox because you are using the wrong method to get the element. Trying using id instead getElementById. Below is a solution. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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);
}
body {
background-color: #BB9797;
}
</style>
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<script>
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
let color = document.body.style.background;
if (color === 'black') {
document.body.style.background = "#BB9797";
} else {
document.body.style.background = "black";
}
}
</script>
</body>
</html>

You should make 2 change here:
Firstly you should add array index number when you typing like document.getElementsByName("checkbox")[0] because getElementsByName return array:
document.getElementsByName("checkbox")[0].onclick = function() {myFunction()};
Secondly you should add name attribute add in checkbox because you selecting element by getElementsByName but it is absent in your element:
<label class="switch">
<input type="checkbox" name="checkbox">
<span class="slider"></span>
</label>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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);
}
body {
background-color: #BB9797;
}
</style>
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" name="checkbox">
<span class="slider"></span>
</label><br>
<script>
var checkbox = document.getElementsByName("checkbox")[0];
checkbox.onclick = function() {myFunction()};
function myFunction() {
if(checkbox.checked) { document.body.style.backgroundColor = "black";}
else {document.body.style.backgroundColor = "#BB9797";}
}
</script>
</body>
</html>

Here is updated code just I add a new Id and function please check this solution I think it will work for you
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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);
}
body {
background-color: red;
}
</style>
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<script>
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
let color = document.body.style.background;
if (color === 'black') {
document.body.style.background = "red";
} else {
document.body.style.background = "black";
}
}
</script>
</body>
</html>

Another solution which, in my opinion, is a cleaner solution, is to use classList.toggle to toggle a class on the body element. This way you don't need to change any code if you need to redesign the colours. Only changes in CSS is required.
document.getElementById("toggleSwitch").onclick = function() { myFunction() };
function myFunction() {
document.body.classList.toggle("switch-on");
}
.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);
}
.switch-on {
background-color: black;
}
body {
background-color: #BB9797;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
</body>
</html>

$(document).ready(function(){
$('.checkbox').on('click', function(){
$('body').toggleClass('change');
});
});
body.change{
background-color: black;
color: #ffffff;
}
.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);
}
body {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" class="checkbox">
<span class="slider"></span>
</label><br>
</body>
</html>
Check the above code.

Related

Saving a toogle switch value in Django

Hi I am just trying to save a toggle switch value onclick to save to a Boolean field in Django
home.html
<style>
.home-container{
display:grid;
grid-template-columns: 1fr 4fr;
}
.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: #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%;
}
</style>
<div>
<label class="switch">
** <input type="checkbox" checked>**
<span class="slider round"></span>
</label>
</div>
models.py
is_active = models.BooleanField(default=False)
urls.py
path('engine/', views.engine, name="engine"),
I tried several suggestions on the web but could not make it work as I am new to development.
I know I need to use javascript. Please help write my views.py and javascript in home.html.

Is there a way to style checkbox appearance in p5js to become a toggle switch?

I'm trying to change the appearance of a checkbox in p5 canvas using javascript to have the same appearance as a toggle switch like this
I've tried experimenting in the css file in this sketch but it doesn't seem to be working
Any help would be much appreciated. Thanks
let checkbox;
function setup() {
checkbox = createCheckbox("label", false);
checkbox.changed(myCheckedEvent);
createDiv(`
<label class="switch">
<input id="toggle" type="checkbox" />
<span class="slider round"></span>
</label>`);
checkbox = select('#toggle');
}
function myCheckedEvent() {
if (this.checked()) {
console.log("Checking!");
} else {
console.log("Unchecking!");
}
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.siwtch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.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;
}
#toggle:checked + .slider {
background-color: #2196F3;
}
#toggle:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
#toggle: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://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
You're approach basically looks reasonable, it just needs a few tweaks (see comments):
let checkbox;
function setup() {
noCanvas();
// There's no need to use createCheckbox() since you're create the <input /> tag yourself
// Also I got rid of the wrapping div since it wasn't strictly necessary.
let label = createElement(
'label',
`<input id="toggle" type="checkbox" />
<span class="slider round"></span>`
);
// Because I'm using createElement() to create the label I have to add the class attribute:
label.addClass('switch');
checkbox = select('#toggle');
// Register the event handler after using select() to get the p5.Element for the checkbox.
checkbox.changed(myCheckedEvent);
}
function myCheckedEvent() {
if (this.checked()) {
console.log("Checking!");
} else {
console.log("Unchecking!");
}
}
html, body {
margin: 0;
padding: 0;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
/* COMMENT: there was a typo here, uses to be .siwtch */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.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;
}
#toggle:checked + .slider {
background-color: #2196F3;
}
#toggle:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
#toggle: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://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Bootstrap align text vertically to switch button [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I want to align a text in a <label> or <span> element to this custom switch button:
.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: #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%;
}
<span>Custom switch</span>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
I cannot get it working setting the margin or float on the switch class element.
Use flex
body {
display: flex;
align-items: center;
}
.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: #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%;
}
<span>Custom switch</span>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
.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: #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%;
}
.right-div {
display: inline-block;
}
.left-div {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.parent-div{
display:table;
}
<div class="parent-div">
<div class="left-div">
<span>Custom switch</span>
</div>
<div class="right-div">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div>
As an alternative to flex, you can also use css tables:
.switch-container {
display: table;
}
.switch-label {
display: table-cell;
vertical-align: middle;
}
.switch {
position: relative;
display: table-cell;
vertical-align: center;
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: #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%;
}
<div class="switch-container">
<span class="switch-label">Custom switch</span>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>

Storing and retrieving a checkbox's value in a chrome extension

I'm making a chrome extension and I want to be able to save and read the status of a checkbox (formatted to look like a switch) to affect how the program runs.
At the moment I can't even access the checkbox in any way, granted I've never used javascript in any capacity before. To test if I can even read the current state I've used
console.log(document.getElementById("activeSwitch").checked)
or some variant thereof.
This is my popup html I'm using to create the button
<head>
<title>test</title>
<script src="popup.js"></script>
<style>
.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: #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);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<p><b>test extension</b></p>
<label id="activeSwitch" class="switch">
<input type="checkbox" checked/>
<span class="slider round"></span>
</label>
</div>
</body>

How to add function in toggle button

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>
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.com/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/>
Link

Categories