Accordion arrow right down

by akshatha suchethan

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-chevron-down"></i>&nbsp;&nbsp;General</a>
            </h4>

    </div>
    <div id="panel1" class="panel-collapse collapse in">
      <div class="panel-body">
        <ul>
          <li>Home</li>
          <li>Annoucemnets</li>
          <li>News & Annoucemnets</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-chevron-right"></i>&nbsp;&nbsp;It Systems</a>
            </h4>

    </div>
    <div id="panel2" class="panel-collapse collapse">
      <div class="panel-body">IT Systems</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-chevron-right"></i>&nbsp;&nbsp;Finance</a>
            </h4>

    </div>
    <div id="panel3" class="panel-collapse collapse">
      <div class="panel-body">Finance</div>
    </div>
  </div>
</div>

JavaScript

var selectIds = $('#panel1,#panel2,#panel3');
$(function($) {
  selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
    $(this).prev().find('.fa').toggleClass('fa-chevron-right fa-chevron-down');
  })
});