remove css style on button click jquery?

Question

I am trying to change the colour of buttons if they're clicked using jquery.

my code bellow works and it will add the expand class to the clicked button. but I need to know how I can remove the class and add the old class to it if another button is clicked and visa versa.

this is my code now:

$(".mybtn").click(function(){
  $(this).removeClass( "mybtn" ).addClass('expand');

});

and the html is like this:

<button name='mybtn' id='mybtn' class='mybtn' value='1'>1</button>
<button name='mybtn' id='mybtn' class='mybtn' value='2'>2</button>
<button name='mybtn' id='mybtn' class='mybtn' value='3'>3</button>

and the css is a simple css with background color:

.mybtn{
background-color:#fff;
}

.expand{
background-color:#000;
}

any help would be appreciated.

FYI IDs must be unique.

j08691
– j08691

2014-07-11 16:39:16 +00:00
Commented Jul 11, 2014 at 16:39 — j08691
– j08691, Commented Jul 11, 2014 at 16:39
Are you trying to achieve a toggle effect on click?

Midhun Krishna
– Midhun Krishna

2014-07-11 16:41:35 +00:00
Commented Jul 11, 2014 at 16:41 — Midhun Krishna
– Midhun Krishna, Commented Jul 11, 2014 at 16:41

Jim · Accepted Answer · 2014-07-11 16:41:28Z

1

Reset all the "expand" class objects first:

$(".mybtn").click(function(){
   // remove expand class and add original mybtn class
  $(".expand").removeClass( "expand").addClass("mybtn");

  $(this).removeClass( "mybtn" ).addClass('expand');

});

See working example at Fiddle

answered Jul 11, 2014 at 16:41

Jim

5862 silver badges11 bronze badges

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

4 Comments

user3806613 Over a year ago

this is exactly what I needed to do. Thank you Jim.

Daniel Over a year ago

FYI: You can get the same results without ever removing the "mybtn" class

faerin Over a year ago

@user3806613, please mark this one as the right answer if it worked for you :)

user3806613 Over a year ago

@entiendoNull, I did try to do that but STO says I have to wait for 5 minutes before accepting the answer. it is now 2 minutes. so will accept it as soon as the time limit is up.

michaelp · Accepted Answer · 2014-07-11 16:41:34Z

0

$('.mybtn').toggle(function () {
    $(".mybtn").removeClass("mybtn").addClass("expand");
}, function () {
    $(".mybtn").removeClass("expand").addClass("mybtn");
});

answered Jul 11, 2014 at 16:41

michaelp

3636 silver badges25 bronze badges

Comments

cesar andavisa · Accepted Answer · 2014-07-11 16:57:07Z

0

try this :

$(".mybtn").each(function(){    
   $(this).click(function(el, ev){
      $('button#mybtn').addClass('mybtn').removeClass('expand'); 
      $(this).removeClass( "mybtn" ).addClass('expand');     
   }); 
})

edited Jul 11, 2014 at 16:57

answered Jul 11, 2014 at 16:42

cesar andavisa

3401 silver badge11 bronze badges

Collectives™ on Stack Overflow

remove css style on button click jquery?

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related