title: How to toggle font awesome icon on click?
body: <p>I am using font awesome 'plus' icon on expandable categories list items. When they are in expanded state i want to show a 'minus' sign'</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="category-tabs"&gt;
      &lt;li&gt;&lt;a href="javascript:void"&gt;&lt;i class="fa fa-fw"&gt;&lt;/i&gt;Category 1&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="javascript:void"&gt;item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void"&gt;item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void"&gt;item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$('#category-tabs li a').click(function(){
      $(this).next('ul').slideToggle('500');
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/jwzCj.png" alt="enter image description here"></p>