title: Change icon on click function
body: <p>I createad a toggle button and I put a arrow in it, but I want that when the button it's clicked, the arrow changes. I'm using font awesome to put this arrows, so I just have to change fa-chevron-right to fa-chevron-down on click.</p>
  
  <p>I tried this but it's not working.</p>
  
  <pre><code> &lt;button class="btn btn-warning btn-receita offset-lg-2" id="btn-receitamob" data-clicked-times="0"&gt; CLIQUE AQUI PARA VER A RECEITA &lt;span id="span-circle"&gt; &lt;i class="fas fa-chevron-right" id="seta"&gt;&lt;/i&gt; &lt;/span&gt;                      &lt;/button&gt;
  
  &lt;div id="receita-div" style="display: none;" class="receita-hidden"&gt;
  --content
  
  
  
  
  &lt;script&gt; 
      $( "#btn-receitamob" ).click(function() {
          $("#receita-div").slideToggle(1500);
      });
  &lt;/script&gt; 
  &lt;script&gt;
      $("#btn-receitamob").click(function() {
          $('.fa-chevron-right').removeClass(".fa-chevron-right").addClass(".fa-chevron-down"); //Adds 'a', removes 'b'
  
      }, function() {
          $('.fa-chevron-right').removeClass(".fa-chevron-down").addClass(".fa-chevron-right"); //Adds 'b', removes 'a'
  
      });
  &lt;/script&gt;
  </code></pre>