Is there a way to remove the jQuery .css() upon clicking a different button?

Question

Is there a way to remove the jQuery .css() upon clicking a different button?

I am currently working on a jQuery switch where I want the clicked button to revert back to its original state when another button is clicked. Additionally, I want the 'OFF' button to be automatically clicked first when the page loads. Despite trying various code snippets, I have been unable to achieve the desired functionality.

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

    });

});

javascript jquery html css

Answer 1

Answer №1

By utilizing classes and Jquery, achieving this task is quite simple.

Start by establishing a new class for the "on" state.

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

Next, revise your click handlers to toggle this class on and off instead of directly applying specific CSS styles.

$(document).ready(function(){
    var switchOn = '#switchOn';
    var switchOff = '#switchOff';

    $(switchOn).click(function(){
        $(this).addClass("on");
        $(switchOff).removeClass("on");
    });

    $(switchOff).click(function(){
        $(this).addClass("on");
        $(switchOn).removeClass("on");
    });
});

Answer 2

By utilizing classes and Jquery, achieving this task is quite simple.

Start by establishing a new class for the "on" state.

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

Next, revise your click handlers to toggle this class on and off instead of directly applying specific CSS styles.

$(document).ready(function(){
    var switchOn = '#switchOn';
    var switchOff = '#switchOff';

    $(switchOn).click(function(){
        $(this).addClass("on");
        $(switchOff).removeClass("on");
    });

    $(switchOff).click(function(){
        $(this).addClass("on");
        $(switchOn).removeClass("on");
    });
});

Answer 3

Answer №2

By clicking a button, you have the ability to switch off the other button by adjusting the CSS properties of that particular button to inherit, which resets the properties to their default settings. You can target these buttons using $('#darkmodeoff') and $('#darkmodeon'), similar to how you utilize $(this).

To ensure that the OFF button is initially selected, you just need to apply the styles to it within $(document.ready). In this case, I've opted for

$('#darkmodeoff')[0].style.backgroundColor

and $('#darkmodeoff')[0].style.color.

Personally, it is recommended to include cursor: pointer to the buttons to give the appearance of being clickable, and outline: none to button:hover in order to eliminate the default blue border. These changes have been incorporated into the provided code 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>

Hopefully, this explanation proves to be beneficial! :)

Answer 4

By clicking a button, you have the ability to switch off the other button by adjusting the CSS properties of that particular button to inherit, which resets the properties to their default settings. You can target these buttons using $('#darkmodeoff') and $('#darkmodeon'), similar to how you utilize $(this).

To ensure that the OFF button is initially selected, you just need to apply the styles to it within $(document.ready). In this case, I've opted for

$('#darkmodeoff')[0].style.backgroundColor

and $('#darkmodeoff')[0].style.color.

Personally, it is recommended to include cursor: pointer to the buttons to give the appearance of being clickable, and outline: none to button:hover in order to eliminate the default blue border. These changes have been incorporated into the provided code 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>

Hopefully, this explanation proves to be beneficial! :)

Answer 5

Answer №3

Instead of using $(this).off('click',darkon);, try using $(darkon).trigger('click'); at the beginning of your darkoff event handler and $(darkoff).trigger('click'); at the beginning of your darkon event handler.

Don't forget to include }).trigger('click'); before closing the darkoff event handler.

Unfortunately, I'm unable to modify your code right now as I am currently using my phone.

Answer 6

Instead of using $(this).off('click',darkon);, try using $(darkon).trigger('click'); at the beginning of your darkoff event handler and $(darkoff).trigger('click'); at the beginning of your darkon event handler.

Don't forget to include }).trigger('click'); before closing the darkoff event handler.

Unfortunately, I'm unable to modify your code right now as I am currently using my phone.

Answer 7

Answer №4

If you wish to disable the event, you must provide the handler as an argument for the click event.
Instead of dynamically applying CSS, use a class to target the specific state for a cleaner approach.
To execute the handler upon page load, trigger the click event once the handler is attached.

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

// Proper way to bind the click handler to a button for future disabling of 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>

Answer 8

If you wish to disable the event, you must provide the handler as an argument for the click event.
Instead of dynamically applying CSS, use a class to target the specific state for a cleaner approach.
To execute the handler upon page load, trigger the click event once the handler is attached.

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

// Proper way to bind the click handler to a button for future disabling of 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>

Is there a way to remove the jQuery .css() upon clicking a different button?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ensure that the content remains centered within absolutely positioned DIVs inside the parent container

retrieve all users who are not currently in the group

AngularJS component data binding is dysfunctional

Is there a way to successfully press a button on a website?

When clicking on HTML input fields, they do not receive focus

Interact with jQuery mobile radio buttons by triggering events on click

Is there a possibility of Node.js being blocked during the processing of large file uploads?

What steps should I follow to include a message in the custom form validation rule in my React application?

How can I preserve the line break in a textarea using PHP?

Express server encountering difficulties locating requested file for download

Tips for adjusting the width of Material UI TextField within a Table

In search of the precise locator for conducting Selenium tests

I Tried Adding Up All the Numbers, but It Doesn't Seem to Work for Every Dynamic Total Field

Initiate the printing process by executing the window.print() function. As the document is being

Remove the click event once the sorting process has been completed

Execute a jQuery AJAX request to fetch and retrieve only the HTML content

React - dynamically injecting external logic during execution

Selecting a specific value in a row from an HTML table - a comprehensive guide

remove MongoDB entry using unique identifier

JavaScript and HTML have encountered an Uncaught TypeError: The property 'addEventListener' cannot be read because it is null