CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AbuN2286
AbuN2286

Reputation: 153

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

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);

    });

});

Upvotes: 1

Views: 834

Answers (4)

Wayne Allen
Wayne Allen

Reputation: 1745

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");
    });
});

Upvotes: 4

Sushanth --
Sushanth --

Reputation: 55750

  • 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>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

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! :)

Upvotes: 1

James
James

Reputation: 1123

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.

Upvotes: 1

Related Questions