Add and remove css class on button click

Question

I'm using this code to show and hide sidebar in my html page

$(document).ready(function(){

       $('button.rside').click(function(){
               $( "#all-labels" ).removeClass( "side-click" );
               $( ".box" ).removeClass( "box-side" );
               $(this).removeClass( "rside" );
               $(this).addClass( "side" );
          });
       $('button.side').click(function(){
               $( "#all-labels" ).addClass( "side-click" );
               $( ".box" ).addClass( "box-side" );
                $(this).addClass( "rside" );
                $(this).removeClass( "side" );
          });
     });

This code working well when i click on the button, add new class and relace the button class side with rside, button the same code for the new button class rside for returning all elemnts to it's normal position not working.

Can you provide fiddler code

monu
– monu

2014-02-28 06:57:38 +00:00
Commented Feb 28, 2014 at 6:57 — monu
– monu, Commented Feb 28, 2014 at 6:57
What's your HTML like?

aIKid
– aIKid

2014-02-28 06:58:07 +00:00
Commented Feb 28, 2014 at 6:58 — aIKid
– aIKid, Commented Feb 28, 2014 at 6:58

Milind Anantwar · Accepted Answer · 2014-02-28 06:58:47Z

3

You need event delegation.use .on():

 $(document).on('click','button.rside',function(){
           $( "#all-labels" ).removeClass( "side-click" );
           $( ".box" ).removeClass( "box-side" );
           $(this).removeClass( "rside" );
           $(this).addClass( "side" );
      });
 $(document).on('click','button.side',function(){ 
           $( "#all-labels" ).addClass( "side-click" );
           $( ".box" ).addClass( "box-side" );
            $(this).addClass( "rside" );
            $(this).removeClass( "side" );
      });

answered Feb 28, 2014 at 6:58

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

Comments

Felix · Accepted Answer · 2014-02-28 07:01:00Z

0

You can use event delegation and shorten your code using toggleClass() here:

$(document).ready(function(){
    $(document).on('click','button.rside',function(){
        $("#all-labels").toggleClass("side-click");
        $(".box").toggleClass("box-side");
        $(this).toggleClass( "rside side" );
    });
});

answered Feb 28, 2014 at 7:01

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

Mr.G · Accepted Answer · 2014-02-28 07:02:49Z

Try this:

$(document).ready(function(){

   $('button.rside').live("click",function(){
           $( "#all-labels" ).removeClass( "side-click" );
           $( ".box" ).removeClass( "box-side" );
           $(this).removeClass( "rside" );
           $(this).addClass( "side" );
      });
   $('button.side').live("click",function(){
           $( "#all-labels" ).addClass( "side-click" );
           $( ".box" ).addClass( "box-side" );
           $(this).addClass( "rside" );
           $(this).removeClass( "side" );
      });
 });

or

  $( document ).delegate( "button.rside", "click",function(){
           $( "#all-labels" ).removeClass( "side-click" );
           $( ".box" ).removeClass( "box-side" );
           $(this).removeClass( "rside" );
           $(this).addClass( "side" );
      });
   $( document ).delegate( "button.side", "click",function(){
           $( "#all-labels" ).addClass( "side-click" );
           $( ".box" ).addClass( "box-side" );
           $(this).addClass( "rside" );
           $(this).removeClass( "side" );
      });

Jai · Accepted Answer · 2014-02-28 07:11:17Z

0

Try with event delegation with .toggleClass() instead to short it possible:

$(document).ready(function(){
   $(document).on('click', 'button.side, button.rside', function(){
       $( "#all-labels" ).toggleClass( "side-click" );
       $( ".box" ).toggleClass( "box-side" );
       $(this).toggleClass( "rside side" );
   });
});

You can replace $(document) in the on click event with closest static parent's ID/className.

edited Feb 28, 2014 at 7:11

answered Feb 28, 2014 at 7:03

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Add and remove css class on button click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related