title: Change font awesome icon after click event
body: <p>In the html, I have links to two font-awesome icons, a plus and a minus. I want the plus icon ONLY to load first.  When the plus icon is clicked, it runs a function and opens a vertical navigation bar. At this stage, I would like the plus icon to change to the minus.  Then, when the minus icon is clicked, the bar closes and the icon will change back to the plus.</p>
  
  <p>This is the html:</p>
  
  <pre><code> &lt;nav&gt;
       &lt;a href="#"&gt;&lt;i class="fa fa-plus-circle" style="font-size:20px;"&gt;&lt;/i&gt;&lt;/a&gt;
       &lt;a href="#"&gt;&lt;i class="fa fa-minus-circle" style="font-size:20px;"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>And this is the js:</p>
  
  <pre><code>var clicked = false;
  $('.fa-plus-circle').click(function() {
      if (clicked == false) {
        $('div.vertical-nav').animate({
          'right': 0
        });
        clicked = true;
  
      } else {
        $('div.vertical-nav').animate({
          'right': -250
        });
        clicked = false;
      }
  
    });
  
  })
  </code></pre>