jQuery onclick toggle class name

Question

Using jQuery  how do I toggle classA to classB on click going from    lt a class  switch  href     gt Switch lt  a gt   lt div class  classA  gt  lt  div gt        switch   on  click   function e           classA   removeClass  classA   addClass  classB        e preventDefault         How do I toggle the class  instead of just replacing it like I m doing here

User · Answer

you can use toggleClass    to toggle class it is really handy   case 1   lt div id  mydiv  class  class1  gt  lt  div gt       mydiv   toggleClass  class1 class2     output   lt div id  mydiv  class  class2  gt  lt  div gt    case 2   lt div id  mydiv  class  class2  gt  lt  div gt       mydiv   toggleClass  class1 class2     output   lt div id  mydiv  class  class1  gt  lt  div gt    case 3   lt div id  mydiv  class  class1 class2 class3  gt  lt  div gt       mydiv   toggleClass  class1 class2     output   lt div id  mydiv  class  class3  gt  lt  div gt

User · Answer

jQuery has a toggleClass function    lt button class  switch  gt Click me lt  button gt    lt div class  text-block collapsed pressed  gt some text lt  div gt    lt script gt              switch   on  click   function e              text-block   toggleClass  collapsed pressed      you can list several class names        e preventDefault             lt  script gt

User · Answer

It can even be made dependent to another attribute changes  like this      classA   toggleClass  classB      input   prop  disabled      In this case  classB are added each time the input is disabled

[jquery] jQuery onclick toggle class name

Examples related to jquery