Toggle Font Awesome, Plus-Minus Icons OnClick

Toggle Font Awesome, Plus-Minus Icons OnClick

by rajnishw3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul id="category-tabs">
    <li>
    
      <span data-toggle="collapse" data-target="#sub">
        <i class="fa fa-plus-circle">Menu</i>
      </span>
      
      <ul class="collapse" id="sub">
         <li><a href="javascript:void">item 1</a></li>
         <li><a href="javascript:void">item 2</a></li>
         <li><a href="javascript:void">item 3</a></li>
      </ul>
      
    </li>
</ul>

CSS

ul{
  padding: 20px;
  margin: 0;
  list-style-type: none;
}

ul li{
  font-size: 20px;
}

JavaScript

$('#category-tabs li span').click(function(){
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});