Easiest way to toggle 2 classes in jQuery

Question

If I have class  A and class  B and want to switch in between on button click  what s a nice solution for that in jQuery  I still don t understand how toggleClass   works   Is there an inline solution to put it in onclick    event

User · Answer

I ve made a jQuery plugin for working DRY     fn toggle2classes   function class1  class2     if   class1     class2       return this     return this each function        var  elm     this        if   elm hasClass class1      elm hasClass class2           elm toggleClass class1       class2        else        elm addClass class1              You can just try it here  copy and run this in the console and then try      body   toggle2classes  a    b

User · Answer

Here is a simplified version   albeit not elegant  but easy-to-follow       yourButton   toggle function                  target   removeClass  a   addClass  b      Adds  a   removes  b      function                 target   removeClass  b   addClass  a      Adds  b   removes  a         Alternatively  a similar solution       yourbutton   click function              target   toggleClass  a b      Adds  a   removes  b  and vice versa

User · Answer

Toggle between two classes  A  and  B  with Jquery          selecor id   toggleClass  A B

User · Answer

If your element exposes class A from the start  you can write     element  toggleClass  A B      This will remove class A and add class B  If you do that again  it will remove class B and reinstate class A   If you want to match the elements that expose either class  you can use a multiple class selector and write       A   B   toggleClass  A B

User · Answer

Here s another  non-conventional  way     It implies the use of underscore or lodash  It assumes a context where you    the element doesn t have an init class  that means you cannot do toggleClass  a b    you have to get the class dynamically from somewhere    An example of this scenario could be buttons that has the class to be switched on another element  say tabs in a container       1  define the array of switching classes  var types     web   email        2  get the active class  var type     mybutton  prop  class        3  switch the class with the other on  say    the container  You can guess the other by using   without   on the array   mycontainer removeClass   without types  type  0   addClass type

User · Answer

The easiest solution is to toggleClass   both classes individually   Let s say you have an icon        lt i id  target  class  fa fa-angle-down  gt  lt  i gt    To toggle between fa-angle-down and fa-angle-up do the following           sometrigger   click function                target   toggleClass  fa-angle-down                target   toggleClass  fa-angle-up              Since we had fa-angle-down at the beginning without fa-angle-up each time you toggle both  one leaves for the other to appear

User · Answer

Your onClick request    lt span class  A  onclick  var state   this className indexOf  A    gt  -1    this  toggleClass  A    state  toggleClass  B   state    gt Click Me lt  span gt    Try it  https   jsfiddle net v15q6b5y     Just the JS    la jQuery       selector   toggleClass  A    state  toggleClass  B   state

[jquery] Easiest way to toggle 2 classes in jQuery

Examples related to jquery

Examples related to toggleclass