How to toggle font awesome icon on click?

Question

You can toggle the class of the i element within the clicked anchor like

<i class="fa fa-plus-circle"></i>

then

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

See working example:

$('#category-tabs li a').click(function() {
  $(this).next('ul').slideToggle('500');
  $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

<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">

<ul id="category-tabs">
  <li>
    <a href="https://stackoverflow.com/questions/23266545/javascript:void">
      <i class="fa fa-plus-circle"></i> Category 1
    </a>
    <ul>
      <li><a href="https://stackoverflow.com/questions/23266545/javascript:void">item 1</a></li>
      <li><a href="https://stackoverflow.com/questions/23266545/javascript:void">item 2</a></li>
      <li><a href="https://stackoverflow.com/questions/23266545/javascript:void">item 3</a></li>
    </ul>
  </li>
</ul>

Leave a Comment Cancel reply