My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsuccessful.
Here is the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Toggleswitch</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='script.js' type='text/javascript'></script>
</head>
<body>
<div class="switch-container">
<button id="darkmodeon">ON</button>
<button id="darkmodeoff">OFF</button>
</div>
</body>
</html>
This is the CSS code:
body{
background-color: black;
}
.switch-container{
display: flex;
justify-content: space-between;
background-color: white;
border-radius: 50px;
padding: 5px;
width: 135px;
}
#darkmodeon{
width: 50px;
height: 50px;
border-radius: 100%;
border: none;
color: #a5a5a5;
font-family:"calibri light";
font-size: 15px;
font-weight: bold;
background-color: #e8e8e8;
}
#darkmodeoff{
width: 50px;
height: 50px;
border-radius: 100%;
border: none;
color: #a5a5a5;
font-family:"calibri light";
font-size: 15px;
font-weight: bold;
background-color: #e8e8e8;
}
Lastly, here is the jQuery code:
$(document).ready(function(){
var darkon = "#darkmodeon";
var darkoff = "#darkmodeoff";
$(darkon).click(function(){
$(this).css({
"background-color": "#66e86a",
"color": "white" ,
"transition": "all 0.3s ease"
});
});
$(darkoff).click(function(){
$(this).css({
"background-color": "#66e86a",
"color": "white" ,
"transition": "all 0.3s ease"
});
$(this).unbind('click', darkon);
});
});