Change icon on click toggle

Question

I have a simple script in jquery to toggle a div  show and hide  when a  lt p gt  is clicked  I m using bootstrap    HTML    lt p id  click advance  gt  lt i class  icon-circle-arrow-down  gt  lt  i gt  Advanced search lt  p gt   lt div id  display advance  gt       lt p gt This is the advance search lt  p gt   lt  div gt    JS       click advance   click function        display advance   toggle  1000      this  html   lt i class  icon-circle-arrow-up  gt  lt  i gt  Advanced search           So  when I click for the first time the icon changes from down to up but obviously when I click  click advance  again the icon doesn t change back  So I want the toggle effect like the show and hide  but I m cluless on how to do it with an icon

User · Answer

togglebutton   click function            fa-arrow-circle-left   toggleClass  fa-arrow-circle-right        I have a button with the id  togglebutton  and an icon from FontAwesome   This can be a way to toggle it   from left arrow to right arrow icon

User · Answer

Try this       click advance   click function          display advance   toggle  1000      icon     this  find  i      icon hasClass  icon-circle-arrow-down        icon addClass  icon-circle-arrow-up   removeClass  icon-circle-arrow-down       else      icon addClass  icon-circle-arrow-down   removeClass  icon-circle-arrow-up             or even better  as Kevin said       click advance   click function          display advance   toggle  1000      icon     this  find  i      icon toggleClass  icon-circle-arrow-up icon-circle-arrow-down

User · Answer

Instead of overwriting the html every time  just toggle the class       click advance   click function             display advance   toggle  1000           i   this  toggleClass  icon-circle-arrow-up icon-circle-arrow-down

User · Answer

If your icon is based on the text in the  block  ligatures  rather the class of the  block then the following will work  This example uses the Google Material Icons     and  -  icons as part of MaterializeCSS    lt a class  btn-class  gt  lt i class  material-icons  gt add lt  i gt  lt  a gt       btn-class   on  click  function        if    this  find  i   text       add              this  find  i   text  remove          else             this  find  i   text  add                Edit  Added missing    needed for this to function properly   It also works for JQuery post 1 9 where toggling of functions was deprecated

User · Answer

If  toggle is not working I would do the next   var flag   false      click advance   click function        if  flag    false              display advance   show  1000                Add more code        flag   true            else             display advance   hide  1000              Add more code        flag   false            It s a little bit more code  but it works

User · Answer

Here is a very easy way of doing that      function              glyphicon   unbind  click            glyphicon   click function  e              this  toggleClass  glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down          Hope this helps  D

[jquery] Change icon on click (toggle)

Examples related to jquery

Examples related to twitter-bootstrap