How can I remove the jQuery .css() when clicking other button?

Question

In this jQuery switch, I'm trying to make the button that is currently clicked go back to its original state when the other button is clicked. Also id like the off button to be clicked first automatically when the page is loaded. I've tried many codes but cant seem to get it to work.

HTML:

<!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="switchcontainer">   
    <button id="darkmodeon">ON</button>
    <button id="darkmodeoff">OFF</button>
</div>

</body>
</html>

CSS:

body{
    background-color: black;
}

.switchcontainer{
    background-color: white;
    display: flex;
    justify-content: space-between;
    border-radius: 50px;
    width: 125px;
    padding: 5px;

}

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

}

jQuery:

$(document).ready(function(){
    var darkon = '#darkmodeon';
    var darkoff = '#darkmodeoff';

    $(darkon).click(function(){
        $(this).css({
            "background-color": "#85c452",
            "color": "white",
            "transition": "all 0.2s ease"
        });
    });

    $(darkoff).click(function(){
        $(this).css({
            "background-color": "#85c452",
            "color": "white",
            "transition": "all 0.2s ease"
        });

        $(this).off('click',darkon);

    });

});

Wayne Allen · Accepted Answer · 2017-07-04 00:41:08Z

4

You can do it easily using classes and Jquery.

Create a new class for your "on" state.

.on {
     background-color: #85c452;
     color: white;
     transition: all 0.2s ease;
 }

Then change your click handlers to toggle this class on and off instead of setting the specific CSS styles.

$(document).ready(function(){
    var darkon = '#darkmodeon';
    var darkoff = '#darkmodeoff';

    $(darkon).click(function(){
        $(this).addClass("on");
        $(darkoff).removeClass("on");
    });

    $(darkoff).click(function(){
        $(this).addClass("on");
        $(darkon).removeClass("on");
    });
});

edited Jul 4, 2017 at 0:41

answered Jul 3, 2017 at 23:44

Wayne Allen

1,7451 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Obsidian Age · Accepted Answer · 2017-07-03 23:41:10Z

When a button is clicked, you can turn the other button off by setting the CSS properties for that button to inherit. This resets the properties to their default. You can target them with $('#darkmodeoff') and $('#darkmodeon'), just like you are using $(this).

To set the Off button to be selected by default, all you have to do is apply the styles to it in $(document.ready). I've gone with $('#darkmodeoff')[0].style.backgroundColor and $('#darkmodeoff')[0].style.color for this.

Personally, I'd also recommend adding cursor: pointer to the buttons to appear as though you're actually clicking on them, and outline: none to button:hover to remove the blue border that gets generated by default. I've added these to the snippet :)

$(document).ready(function() {
  var darkon = '#darkmodeon';
  var darkoff = '#darkmodeoff';
  
  // Set the off to clicked by default
  $('#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": "inherit",
      "color": "inherit",
      "transition": "all 0.2s ease"
    });
  });

  $(darkoff).click(function() {
    $(this).css({
      "background-color": "#85c452",
      "color": "white",
      "transition": "all 0.2s ease"
    });
    $('#darkmodeon').css({
      "background-color": "inherit",
      "color": "inherit",
      "transition": "all 0.2s ease"
    });
  });

});

body {
  background-color: black;
}

.switchcontainer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-radius: 50px;
  width: 125px;
  padding: 5px;
}

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

button:focus {
  outline: none; /* ADDED */
}

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

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

Hope this helps! :)

Awesome! Glad to hear this solution appears to have helped you :)

James · Accepted Answer · 2017-07-03 23:40:21Z

1

Remove $(this).off('click',darkon); and instead add $(darkon).trigger('click'); to the start of your darkoff event handler and $(darkoff).trigger('click'); to the start of your darkon event handler.

Before you close the darkoff event handler, add this }).trigger('click');

I would edit your original code, but I'm on my phone at the moment.

answered Jul 3, 2017 at 23:40

James

1,1239 silver badges13 bronze badges

Comments

Sushanth -- · Accepted Answer · 2017-07-03 23:43:26Z

If you want to turn of the event, then you will have to pass in the handler as the argument to the click event.
Instead of adding CSS on the fly, use a class to target the state, which is cleaner.
To invoke the handler, on page load, trigger the click event after the handler is bound.

var darkon = '#darkmodeon';
var darkoff = '#darkmodeoff';

// This is how you should be binding your click handler
// to the button if you are planning to turn of the event
// at a later stage. Since, the `off` method expects the same
// function to be passed when you attach the event
$(darkon).click(addActiveClass);

$(darkoff).click(function(e) {
  addActiveClass(e);

  $(darkon).removeClass('on');
  
  $(darkon).off('click', addActiveClass);

});

function addActiveClass(e) {
   var $target = $(e.target);
   
   $target.addClass('on');
}

$(darkon).click();

body {
  background-color: black;
}

.switchcontainer {
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-radius: 50px;
  width: 125px;
  padding: 5px;
}

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

.on {
  background-color: #85c452;
  transition: all 0.2s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switchcontainer">
  <button id="darkmodeon">ON</button>
  <button id="darkmodeoff">OFF</button>
</div>

Collectives™ on Stack Overflow

How can I remove the jQuery .css() when clicking other button?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related