Add class then remove and replace class on click

Question

I have a default class. When the icon has been clicked, the default class will be removed and replaced with the new one, then when the icon has been clicked again, then the old class will be added again, then the new class will be removed. It should be changed every time the icon is clicked. It's closed to .toggleClass(), but should show/hide and replace the class.

Here is my js code

var MenuIcon = $('.menu-icon-plus'),
    MenuSidebar = $('.sidebar');

  MenuIcon.click(function(){
    if ($(MenuSidebar).hasClass('test')) { //existing class
      $(MenuSidebar).removeClass('test');
    } else {
      $(MenuSidebar).addClass('test2'); // replacement of old class
    }

That's a good reason to start doing things simple and not use a default class but style the defaults as-is. Than toggle the special class only. — Roko C. Buljan
– Roko C. Buljan, Commented Jul 3, 2015 at 0:41

Roko C. Buljan · Accepted Answer · 2015-07-03 01:00:12Z

2

Add the two classes to toggleClass("default special") to swap them:

$("button").on("click", function(){

  $(this).toggleClass("default special");
  
});

.default{
  background:lime;
  font-size:2em;
}
.special{
  background:gold;
  /* I don't have font size */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="default">TEST</button>

P.S: If you wanted to only change the background, than toggleClass("special") would suffice.
Or, again using only .toggleClass("special") you could set directly in CSS the reset styles, but that just complicates stuff. It clearly depends on the use case.

edited Jul 3, 2015 at 1:00

answered Jul 3, 2015 at 0:49

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

2 Comments

user3176382 Over a year ago

Thank you. The code works. I just did not know that the .toggleClass can be swapped into two different class.

Roko C. Buljan Over a year ago

@AyiieMiguel yes, that cool functionality is a bit obfustaced inside the toggleClass Docs, but it's there.

Diwas · Accepted Answer · 2015-07-03 00:50:13Z

0

Try this. Replace the classes as per your requirement.

$(document).on('click', '.oldclass', function() {   

            $(this).removeClass('oldclass').addClass('newclass'); 
    });

    $(document).on('click', '.newclass', function() { 

            $(this).removeClass('newclass').addClass('oldclass');
    });

answered Jul 3, 2015 at 0:50

Diwas

7736 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add class then remove and replace class on click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related