Animate font awesome icon from one to another on click

Question

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

Fiddle here - https://jsfiddle.net/kcexpg4j/3/

 body{border:1px solid black} table{width:400px;margin:0 auto}.fa{cursor:pointer}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <caption> <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');"> <i class="fa fa-minus" aria-hidden="true"></i> </span> <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"> <i class="fa fa-plus" aria-hidden="true"></i> </span> <span>Current Waiver Claims</span> </caption> <tbody> <tr> <th>Round</th> <th>Add</th> <th>Drop</th> <th>Time Entered</th> </tr> <tr> <td colspan="4" align="center">You don't have any waiver claims submitted into the system at this time.</td> </tr> </tbody> </table>

Answer 1

You can toggle three classes after the click event is triggered:

 $('.fa').click(function(){ $(this).toggleClass('fa-minus fa-plus rotate'); $('tbody').toggle(); });

 body{border:1px solid black} table{width:400px;margin:0 auto}.fa{cursor:pointer;transition:transform.75s} /* adjust to your needs */.rotate{transform:rotate(180deg)}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table> <caption> <i class="fa fa-minus" aria-hidden="true"></i> <.--<i class="fa fa-plus" aria-hidden="true"></i> not necessary to use both --> <span>Current Waiver Claims</span> </caption> <tbody> <tr> <th>Round</th> <th>Add</th> <th>Drop</th> <th>Time Entered</th> </tr> <tr> <td colspan="4" align="center">You don't have any waiver claims submitted into the system at this time.</td> </tr> </tbody> </table>