Toggle Font Awesome icons on click w/ accordion feature

Question

I have almost no experience with jQuery but I've seen it's fairly simple to achieve a result like I want. The span tag in the panel heading shows a font awesome right-facing caret, and I would like it to toggle to a down-facing caret when clicked (when the accordion will trigger). There's like 12 of these accordion categories on the page so I need it to work for all instances of the caret icon.

<div class="panel-group">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#category" data-toggle="collapse" data-parent="#difcategory">
                <span class="icon-caret-right"></span> Title 
            </a>
        </h4>
    </div>

    <div id="category" class="panel-collapse collapse">
        <div class="panel-body">Accordion info</div><!-- end panel-body -->
    </div><!-- end panel-collapse collapse -->
</div><!-- end panel-group -->

Answer 1

You could try something like this.

<a class="toggle-me"><span></span>Title</a>

.panel-heading .toggle-me:before {
    font-family: 'FontAwesome'; 
    content: "\f078";        
    color: #303030;
    font-size: 12px;
    margin-right: 10px;      
}

.panel-heading .toggle-me.collapsed:before {
    content: "\f054";   
}

Answer 2

Because you are using the class based approach with font awesome you can change the class that is responsible for showing the icon.

$('#category').on('click' function() {
  var $icon = $(this).find('span');
  if ($icon.hasClass('icon-caret-right')) {
    $icon.removeClass('icon-caret-right').addClass('icon-caret-down');
  } else {
    $icon.addClass('icon-caret-right').removeClass('icon-caret-down');
  }
  // code to do accordion
}

Answer 3

Put both icons in the layout and define the visible one using CSS.

<div class="panel-group">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#category" data-toggle="collapse" data-parent="#difcategory">
                <span class="icon-caret-right"></span><span class="icon-caret-down"></span> Title 
            </a>
        </h4>
    </div>
    <div id="category" class="panel-collapse collapse">
        <div class="panel-body">Accordion info</div><!-- end panel-body -->
    </div><!-- end panel-collapse collapse -->
</div><!-- end panel-group -->

.panel-title a .icon-caret-right
{
    display: block;
}
.panel-title a .icon-caret-down
{
    display: none;
}
.panel-title a.collapsed .icon-caret-right
{
    display: none;
}
.panel-title a.collapsed .icon-caret-down
{
    display: block;
}