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'
HTML
<ul id="category-tabs">
<li><a href="javascript:void"><i class="fa fa-fw"></i>Category 1</a>
<ul>
<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>
Jquery
$('#category-tabs li a').click(function(){
$(this).next('ul').slideToggle('500');
});
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')
});
Demo: Fiddle