"Creating a function that reverts a CSS class to its previous state when clicked using CSS and jQuery

Question

"Creating a function that reverts a CSS class to its previous state when clicked using CSS and jQuery

I've got a <div> that starts with a blue background color and has a jQuery onclick event that changes the color to red. I'm trying to figure out how to make the div's background color change back to blue when the button is clicked again, and then return to red if clicked once more. Any suggestions on how to accomplish this?

javascript jquery css

Answer 1

Answer №1

Essential requirement.

$(".yourElement").click(function () {
   $(this).toggleClass("red");
});

The specified CSS properties

.yourDiv{ background-color: #1E90FF; }
.yourDiv.red { background-color:#FF0000; }

Answer 2

Essential requirement.

$(".yourElement").click(function () {
   $(this).toggleClass("red");
});

The specified CSS properties

.yourDiv{ background-color: #1E90FF; }
.yourDiv.red { background-color:#FF0000; }

Answer 3

Answer №2

It's a bit unclear what you mean by clicking twice, so I have provided two potential solutions for you to consider.

The first box will change its background color to blue when clicked once, and back to black when clicked a second time (double-clicked).

The second box changes its background color with each click; alternating between green and yellow.

var box = document.getElementById('box'),
    box2 = document.getElementById('box2'),
    bool = true;
    
    box.addEventListener('click', function(){
      this.style.background = 'blue';
    });

    box.addEventListener('dblclick', function(){
      this.style.background = 'black';
    });

    box2.addEventListener('click', function(){
        if (bool) {
            this.style.background = 'yellow';
            bool = false;
        } else {
            this.style.background = 'green';
            bool = true;
        }
    });

#box {
  height: 100px;
  width: 100px;
  background: black;
  margin: 5px;
}
#box2 {
  height: 100px;
  width: 100px;
  background: green;
  margin: 5px;
}

<div id='box'></div>
<div id='box2'></div>

Answer 4

It's a bit unclear what you mean by clicking twice, so I have provided two potential solutions for you to consider.

The first box will change its background color to blue when clicked once, and back to black when clicked a second time (double-clicked).

The second box changes its background color with each click; alternating between green and yellow.

var box = document.getElementById('box'),
    box2 = document.getElementById('box2'),
    bool = true;
    
    box.addEventListener('click', function(){
      this.style.background = 'blue';
    });

    box.addEventListener('dblclick', function(){
      this.style.background = 'black';
    });

    box2.addEventListener('click', function(){
        if (bool) {
            this.style.background = 'yellow';
            bool = false;
        } else {
            this.style.background = 'green';
            bool = true;
        }
    });

#box {
  height: 100px;
  width: 100px;
  background: black;
  margin: 5px;
}
#box2 {
  height: 100px;
  width: 100px;
  background: green;
  margin: 5px;
}

<div id='box'></div>
<div id='box2'></div>

Answer 5

Answer №3

To effectively address your issue, it would be beneficial to provide a snippet of code that demonstrates how your problem can be resolved. Typically, the jquery onclick event can determine the color of a div by utilizing code resembling the following:

var currentColor = $('a').css("backgroundColor");

Subsequently, you can adjust the colors based on the existing color.

Answer 6

To effectively address your issue, it would be beneficial to provide a snippet of code that demonstrates how your problem can be resolved. Typically, the jquery onclick event can determine the color of a div by utilizing code resembling the following:

var currentColor = $('a').css("backgroundColor");

Subsequently, you can adjust the colors based on the existing color.

Answer 7

Answer №4

To clear the previous value using jQuery, simply pass an empty string to .css method like this: .css('background-color', '');

Answer 8

To clear the previous value using jQuery, simply pass an empty string to .css method like this: .css('background-color', '');

Answer 9

Answer №5

If you're working with Jquery, toggleClass is a great method to use for this purpose. Don't forget to check out the toggle method too.

 <style>
 .blue{
      background-color: blue;
 }
 .red{
      background-color: red;
 }
 </style>

 <div class="blue">
      ....
 </div>

 <script>

 $( ".blue, .red" ).click(function() {
   $( this ).toggleClass("blue");
   $( this ).toggleClass("red");
 });
</script>

p.s. I'm composing this on my phone

Answer 10

If you're working with Jquery, toggleClass is a great method to use for this purpose. Don't forget to check out the toggle method too.

 <style>
 .blue{
      background-color: blue;
 }
 .red{
      background-color: red;
 }
 </style>

 <div class="blue">
      ....
 </div>

 <script>

 $( ".blue, .red" ).click(function() {
   $( this ).toggleClass("blue");
   $( this ).toggleClass("red");
 });
</script>

p.s. I'm composing this on my phone

Answer 11

Answer №6

No need for jQuery, just apply CSS styling to a class and use Vanilla JavaScript to add or remove that class.

let body = document.querySelector('body'),
    box = document.querySelectorAll('.box');

body.addEventListener('click', function(e) {
  let cl = e.target.classList;
  if (cl.contains('box'))
    cl.toggle('active');
});

.box {
  background: blue;
  display:    inline-block;
  margin:     5px;
  height:     2.5rem;
  width:      2.5rem;
}

.active {
  background: red;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Adds a click event listener to the parent element (in this case, the body) instead of creating multiple listeners for each box element, improving performance
By checking the event target's class during the click event, we can determine whether it was a box that was clicked. This prevents adding the active class to unintended elements

To make the code even shorter, you can replace the if block with

cl.contains('box') && cl.toggle('active');

, which toggles the active class if the element has a box class.

Answer 12

No need for jQuery, just apply CSS styling to a class and use Vanilla JavaScript to add or remove that class.

let body = document.querySelector('body'),
    box = document.querySelectorAll('.box');

body.addEventListener('click', function(e) {
  let cl = e.target.classList;
  if (cl.contains('box'))
    cl.toggle('active');
});

.box {
  background: blue;
  display:    inline-block;
  margin:     5px;
  height:     2.5rem;
  width:      2.5rem;
}

.active {
  background: red;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Adds a click event listener to the parent element (in this case, the body) instead of creating multiple listeners for each box element, improving performance
By checking the event target's class during the click event, we can determine whether it was a box that was clicked. This prevents adding the active class to unintended elements

To make the code even shorter, you can replace the if block with

cl.contains('box') && cl.toggle('active');

, which toggles the active class if the element has a box class.

"Creating a function that reverts a CSS class to its previous state when clicked using CSS and jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Implement the backstretch plugin method within a jQuery $.ajax call

Unable to modify the background image in CSS when hovering over

How can ember-data search for a record using both an ID and extra criteria?

Addressing the status bar gap issue on the iPhone X with Cordova for iOS 11.0

Unable to apply a border to the button

Enhancing a custom component with a transition-group component

The component is failing to store its value within the database

Utilizing jQuery for interacting with iframes

The dataset remains undefined within the context of Vue.js

Using three.js to retrieve the camera's position using orbit controls

Revolutionary web element

During the update from Three.js 68 to 69, an error occurred: Unable to access the property 'boundingSphere' of an undefined object

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

ajax - Text not appearing in Google's cached version

Utilizing the Intuit API in NodeJs to seamlessly attach images to items (products) in Quickbooks

Unselected default option in Angular 4's select dropdown

Achieve centered alignment for a website with floated elements while displaying the complete container background color

Locate a specific item within an array using TypeScript

The JavaScript function modifies the value stored in the local storage

Consolidate all data connected to the specified key from a JSON dataset