JSFiddle - React, Tailwind, and code Playground

by Aamir Afridi

HTML

<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
     <h4 class="panel-title">
         Main <span class="fa fa-caret-down fa-lg pull-right"></span>
     </h4>

</div>

JavaScript

$('.panel-heading').click(function () {
     var $span = $(this).find('span.fa');
     if ($span.hasClass('fa-caret-down')) {
         $span.removeClass('fa-caret-down').addClass('fa-caret-right');
     } else {
         $span.removeClass('fa-caret-right').addClass('fa-caret-down');
     }
 });