Switch between two css classes on click

Question

I was wondering how to do something more efficiently in jQuery and that is switch a class to another class on click on #trigger.

So on odd clicks, class a ( .a ) will be given to all <nav>s in the document and then on even clicks, class a ( .a ) will be remove / switched-out and replaced with class b ( .b ).

The only way i could think about doing this is by adding the new class and removing the current class, but i'm sure there has to be a more efficient way of doing this.

http://stackoverflow.com/questions/244392/jquery-toggle-state — adamb, Mar 08 '13 at 19:50
You might find the aptly-named [`.toggleClass()`](http://api.jquery.com/toggleClass/) helpful. — JJJ, Mar 08 '13 at 19:52
@DanielA.White Just what I described above. Adding and removing classes with .addClass() and .removeClass() — IMUXIxD, Mar 09 '13 at 02:48

score 4 · Accepted Answer · answered Mar 08 '13 at 19:52

4

 $('.a').on('click',function(){
      $(this).toggleClass('a b');
 });

answered Mar 08 '13 at 19:52

Fresheyeball

29,567
20
102
164

Thank you for this. Why use .on('click'... instead of .click() ? – IMUXIxD Mar 09 '13 at 02:49
.click is just shorthand for .on('click' but the on method is more powerful. So I always just use .on – Fresheyeball Mar 09 '13 at 18:14
http://stackoverflow.com/questions/11552174/jquery-binding-click-event-best-practices – Fresheyeball Mar 09 '13 at 18:24

Switch between two css classes on click

1 Answers1