My switch design changes the color of the off button back to its original color when the on button is clicked, and vice versa. But when multiple switches are used within a div, I want clicking the on button of one switch to turn off any other on buttons that were previously clicked. Here is the code I have tried:
$("#darkmodeon, #colorfulon").click(function() {
$('#responsiveoff').css({
"background-color": "#d8d8d8",
"color": "#777777",
"transition": "all 0.2s ease"
});
});#dropdowns > div {
display: block !important;
}
body {
margin: 0 auto;
width: 950px;
/* border: solid;
border-color: black; */
background-color: #f2f2f2;
}
/*--------------Navigation Bar------------*/
#navbar {
width: 100%;
background-color: white;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
border-bottom: solid;
border-width: 1px;
border-color: #d8d8d8;
overflow: hidden;
z-index: 10;
}
#nav-container {
max-width: 950px;
min-width: 875px;
margin: 0 auto;
}
#nav-container h1 {
float: left;
margin: 0 auto;
padding-top: 10px;
font-family: "calibri light";
font-size: 25px;
letter-spacing: 0.3em;
margin-left: 5px;
transition: color 0.3s ease;
}
#nav-container a {
float: right;
display: block;
padding: 15px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", sans-serif;
font-size: 18px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
#webdsn-drop {
padding: 75px 0 0 0;
background-color: rgba(252, 252, 252, 0.95);
border-bottom:...
// The rest of the CSS code is omitted for brevity
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
// The remaining code has also been truncated for conciseness
Complete JavaScript Function:
$(document).ready(function(){
// Code for hover effects and dropdown animations
// Dark mode switch functionality
var darkon = '#darkmodeon';
var darkoff = '#darkmodeoff';
// Colorful mode switch functionality
var colorfulon = '#colorfulon';
var colorfuloff = '#colorfuloff';
// Responsive mode switch functionality
var responson = '#responsiveon';
var responsoff = '#responsiveoff';
// Resetting all switches function
$("#darkmodeon, #colorfulon").click(function() {
$('#responsiveoff').css({
"background-color": "#d8d8d8",
"color": "#777777",
"transition": "all 0.2s ease"
});
});
});