title: Animate font awesome icon from one to another on click
body: <p>I haven't had any luck using css transitions to rotate each icon from one to another when clicked to expand and collapse a table. I wanted each icon to spin 180 degrees when you open or close the table. I tried using fa-rotate and flip , but doesn't work , nor did any css transitions i applied</p>
  <p>Fiddle here - <a href="https://jsfiddle.net/kcexpg4j/3/" rel="nofollow noreferrer">https://jsfiddle.net/kcexpg4j/3/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{border:1px solid black}
  table{width:400px;margin:0 auto}
  .fa{cursor:pointer}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;table&gt;
     &lt;caption&gt;
        &lt;span class="module_expand custom_collapse" id="myCollapse_13" onclick="jQuery('#myCollapse_13').parent('').parent().find('tbody:eq(0)').attr('style','display:none');jQuery('#myExpand_13').removeAttr('style');jQuery('#myCollapse_13').attr('style','display:none');"&gt;
        &lt;i class="fa fa-minus" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;span class="module_expand custom_expand" id="myExpand_13" onclick="jQuery('#myExpand_13').parent().parent().find('tbody:eq(0)').removeAttr('style');jQuery('#myExpand_13').attr('style','display:none');jQuery('#myCollapse_13').removeAttr('style');" style="display:none"&gt;
        &lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;span&gt;Current Waiver Claims&lt;/span&gt;
     &lt;/caption&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;th&gt;Round&lt;/th&gt;
           &lt;th&gt;Add&lt;/th&gt;
           &lt;th&gt;Drop&lt;/th&gt;
           &lt;th&gt;Time Entered&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td colspan="4" align="center"&gt;You don't have any waiver claims submitted into the system at this time.&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>