How can I make all of the buttons selected revert back to original when the other buttons are clicked?

Question

When I designed my switch I made it so when the on button was clicked the off color changed back to the original color and when the off button is clicked the on button changed back to the original color.

However, when I use more than one switch in my div I want the on button of one switch to turn off any other on buttons that were clicked. I've tried to do this code my self using this:

$("#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: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#webdsn-content {
  width: 950px;
  margin: 0 auto;
}

#pfdsn-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#pfdsn-content {
  width: 950px;
  margin: 0 auto;
}

#bc-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#bcdsn-content {
  width: 950px;
  margin: 0 auto;
}

#ldsn-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  height: 200px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#ldsn-content {
  width: 950px;
  margin: 0 auto;
}


/*----------THEMES-DROPDOWN-AREA--------*/

#switches-container {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

#themes-drop {
  padding: 75px 0 0 0;
  background-color: rgba(252, 252, 252, 0.95);
  border-bottom: solid 1px #d8d8d8;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
}

#themes-content {
  width: 950px;
  margin: 0 auto;
}


/*--SWITCH--*/

.theme-switch {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 295px;
}

.themename {
  font-family: 'calibri light';
  font-weight: bold;
  font-size: 20.5px;
  color: #777777;
  position: relative;
  top: 15.5px;
  display: inline-block;
}

#darkmodebox {
  width: 240px;
}

.switchcontainer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  border: solid 2px #d8d8d8;
  border-radius: 50px;
  width: 100px;
  padding: 5px;
  margin: 25px 10px;
}

button {
  width: 37px;
  height: 37px;
  border: none;
  border-radius: 50px;
  background-color: #d8d8d8;
  color: #777777;
  font-family: 'calibri light';
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}


/*--------------------------------------*/

.subname-container {
  display: block;
}

.subname {
  color: black;
  border: solid;
  border-width: 1px;
  border-radius: 7.5px;
  padding: 5px 15px;
  display: inline;
  font-family: 'calibri light';
  letter-spacing: 2.5px;
  transition: background-color, color, 0.5s ease;
}

.subname:hover {
  background-color: #353535;
  border-color: white;
  color: white;
  transition: background-color, color, 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>

<head>

  <title>Home</title>
  <link id="defaultcss" 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 id="navbar">
    <div id="nav-container">
      <h1>PORTFOLIO</h1>
      <a id="themes" href="#">Theme Settings</a>
      <a id="ld" href="#">Logo Design</a>
      <a id="bc" href="#">Business Cards</a>
      <a id="pf" href="posters+flyers.html">Posters & Flyers</a>
      <a id="web" href="#">Website Design</a>

    </div>
  </div>

  <div id="dropdowns">
    <div id='webdsn-drop'>
      <div id="webdsn-content">
        <h2 class="subname">WEBSITE DESIGN</h2>
      </div>
    </div>

    <div id='pfdsn-drop'>
      <div id="pfdsn-content">
        <h2 class="subname">POSTERS & FLYERS</h2>
      </div>
    </div>

    <div id="bc-drop">
      <div id="bcdsn-content">
        <h2 class="subname">BUSINESS CARDS</h2>
      </div>
    </div>

    <div id="ldsn-drop">
      <div id="ldsn-content">
        <h2 class="subname">LOGO DESIGN</h2>
      </div>
    </div>

    <div id="themes-drop">
      <div id="themes-content">

        <div class="subname-container">
          <h2 class="subname">THEME SETTINGS</h2>
        </div>

        <div id="switches-container">
          <div id="darkmodebox" class="theme-switch">
            <p class="themename">DARK MODE</p>
            <div class="switchcontainer">

              <button id="darkmodeon">ON</button>
              <button id="darkmodeoff">OFF</button>
            </div>
          </div>

          <div class="theme-switch">
            <p class="themename">COLOURFUL MODE</p>
            <div class="switchcontainer">

              <button id="colorfulon">ON</button>
              <button id="colorfuloff">OFF</button>
            </div>
          </div>

          <div class="theme-switch">
            <p class="themename">RESPONSIVE MODE</p>
            <div class="switchcontainer">

              <button id="responsiveon">ON</button>
              <button id="responsiveoff">OFF</button>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>
</body>

</html>

Entire JavaScript:

$(document).ready(function(){
    		
        $('#web').hover(function(){
            $('#webdsn-drop').slideDown(250);
        },
        function(){
          $('#webdsn-drop').hover(function(){}, function(){$(this).slideUp(250);});
        
    	if($('#webdsn-drop').is(':visible'))
    		$('#webdsn-drop').slideUp(250);
    	
    	});
    	
    	$('#webdsn-drop').mouseenter(function(){
            $(this).stop();
        });
    	
    	
    	
    	$('#pf').hover(function(){
            $('#pfdsn-drop').slideDown(250);
        },
        function(){
          $('#pfdsn-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#pfdsn-drop').is(':visible'))
    		$('#pfdsn-drop').slideUp(250);
    	});
    	$('#pfdsn-drop').mouseenter(function(){
            $(this).stop();
        });
    	
    	
    	
    	$('#bc').hover(function(){
            $('#bc-drop').slideDown(250);
        },
        function(){
          $('#bc-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#bc-drop').is(':visible'))
    		$('#bc-drop').slideUp(250);
    	});
    	$('#bc-drop').mouseenter(function(){
            $(this).stop();
        });
    		
    	
    	
    	$('#ld').hover(function(){
            $('#ldsn-drop').slideDown(250);
        },
        function(){
          $('#ldsn-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#ldsn-drop').is(':visible'))
    		$('#ldsn-drop').slideUp(250);
    	});
    	$('#ldsn-drop').mouseenter(function(){
            $(this).stop();
        });
    	
    	
    	
    	$('#themes').hover(function(){
            $('#themes-drop').slideDown(250);
        },
        function(){
          $('#themes-drop').hover(function(){}, function(){$(this).slideUp(250);});
    	if($('#themes-drop').is(':visible'))
    		$('#themes-drop').slideUp(250);
    	});
    	$('#themes-drop').mouseenter(function(){
            $(this).stop();
        });		
    
    //-----------DARK-MODE-SWITCH-----------
    
    	var darkon = '#darkmodeon';
    	var darkoff = '#darkmodeoff';
    	
    	$('#darkmodeoff')[0].style.backgroundColor = "#85c452";
      $('#darkmodeoff')[0].style.color = "white";
    
      $(darkon).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#darkmodeoff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    
      $(darkoff).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#darkmodeon').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
      
      
      
      var colorfulon = '#colorfulon';
    	var colorfuloff = '#colorfuloff';
    	
    	$('#colorfuloff')[0].style.backgroundColor = "#85c452";
      $('#colorfuloff')[0].style.color = "white";
    
      $(colorfulon).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#colorfuloff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    
      $(colorfuloff).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#colorfulon').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    		
    
    		
      var responson = '#responsiveon';
    	var responsoff = '#responsiveoff';
    	
    	$('#responsiveoff')[0].style.backgroundColor = "#85c452";
      $('#responsiveoff')[0].style.color = "white";
    
      $(responson).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#responsiveoff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    
      $(responsoff).click(function() {
        $(this).css({
          "background-color": "#85c452",
          "color": "white",
          "transition": "all 0.2s ease"
        });
        $('#responsiveon').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });
    		
    
    //-------------CSS-STYLES-------------------
    	
    	$('#darkmodeon').click(function (){
    	   $('link[href="main.css"]').attr('href','dark-main.css');
    	});
    	$('#darkmodeoff').click(function (){
    	   $('link[href="dark-main.css"]').attr('href','main.css');
    	});
    
    	
    	$('#colorfulon').click(function (){
    	   $('link[href="main.css"]').attr('href','colorful-main.css');
    	});
    	$('#colorfuloff').click(function (){
    	   $('link[href="colorful-main.css"]').attr('href','main.css');
    	});
    	
    	$('#responsiveon').click(function (){
    	   $('link[href="main.css"]').attr('href','responsive-main.css');
    	});
    	$('#responsiveoff').click(function (){
    	   $('link[href="responsive-main.css"]').attr('href','main.css');
    	});
    	
    });
    
    //-----------------RESET-ALL-SWITCH----------------
    
    
    $("#darkmodeon, #colorfulon").click(function(){
    	  $('#responsiveoff').css({
          "background-color": "#d8d8d8",
          "color": "#777777",
          "transition": "all 0.2s ease"
        });
      });

    });

Answer 1

I suggest you use a class oriented approach for buttons and a data attribute for each theme. Then you only need one event listener for all buttons

<div class="switchcontainer" data-theme="colorful">
      <button class="on-btn">ON</button>
      <button class="off-btn">OFF</button>
</div>

Then toggle an active class on the parent switchcontainer when a button is clicked...simultaneously removing the active class from others.

Simplified example:

$('.switchcontainer button').click(function(e) {
  var $btn = $(this),
    isOnBtn = $btn.hasClass('on-btn'),
    $cont = $btn.parent(),
    theme = $cont.data('theme');

  if (isOnBtn) {
    // remove active class from other button groups
    $('.switchcontainer.active').removeClass('active');
    //do something with new theme
    console.log('New theme:', theme)
  }
  // toggle active class on current container
  $cont.toggleClass('active', isOnBtn);
});

.switchcontainer.active .on-btn {
  background: green;
  color:yellow;      
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switches-container">

  <div class="theme-switch">
    <p class="themename">COLOURFUL MODE</p>
    <div class="switchcontainer" data-theme="colorful">
      <button class="on-btn">ON</button>
      <button class="off-btn">OFF</button>
    </div>
  </div>

  <div class="theme-switch">
    <p class="themename">RESPONSIVE MODE</p>
    <div class="switchcontainer" data-theme="responsive">
      <button class="on-btn">ON</button>
      <button class="off-btn">OFF</button>
    </div>
  </div>

</div>

Answer 2

You look pretty savvy in jQuery so, I'm going to give you the method that I would use.

When a button is clicked, I would add an active class. Before that active class is added, I would remove the active class from all other elements.

Something like this:

$('#some-id button').click(function () {
    $('#some-id .active').removeClass('active');
    $(this).addClass('active')
});

I would then style that active class with whatever color you want.

Play with it and if you still don't get it, I'll provide further assistance.