CODEWITHSUNDEEP
jquery
JayDee
JayDee

Reputation: 1643

How to change the active state of the button in jQuery

I'd like to be able to change the background of the button div depending on it's clicked state. So if it's been activated, and it toggles the div - it's green and if it's closed it's red.

The code I have for getting the div to be green (by adding the class ACTIVE) is: 

 $('#clickme').click(function() {
      $('#slideContainer, #buyOffPage').animate({height: 'toggle'}, 2000);
      $('#clickme').addClass('ACTIVE');
 });

But I don't know how to revert the state so that when the button is clicked again, and the div slideContainer hides it applies the class (INACTIVE), and so that it is in loop, so next click ACTIVE, click after that INACTIVE so on and so forth.

I think I'm going about targeting the state of the button with classes is wrong, but don't know what else to do!

Upvotes: 1

Views: 1838

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30666

Use .toggleClass() that will add/remove automatically the class to the element:

$('#clickme').toggleClass('ACTIVE');

Note:

Inside the click handler, this is the clicked element, you don't need to re-query it. Just use $(this) to refer to the element #clickme

Upvotes: 2

Related Questions