Changing icon on Collapse and Expand Panel

Collapsing and Expanding  for Panel is make very easy by Bootstrap that you can directly achieve using bootstrap.js and Bootstap.css [You can download it from getbootstrap.com]. Than need to write a simple code to change the icon using jQuery. 

Please see below that how to demostrate Changing icon on Collapse and Expand Panel.

It will be look alike below.

Adding the Link for bootstrap css style sheet.

  <link href="css/bootstrap.min.css" rel="stylesheet" />

Code for accordion panel of boot strap.

<div class="panel-group" id="accordion" ng-controller="yogavideo" role="tablist" aria-multiselectable="true" style="color: #000;">

            <div class="panel panel-warning">

                <div class="panel-heading" role="tab" id="headingOne">

                    <h4 class="panel-title">

                        <a role="button" data-toggle="collapse" style="text-decoration:none" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                            <i class="fa fa-arrow-circle-right" style="color:#fff" aria-hidden="true"></i>&nbsp; Indigestion and Gas

                        </a>

                    </h4>

                </div>

                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

                    <div class="panel-body" style="font-size:18px">

                        <ul style="list-style:none;padding-left:4px">

                            <li>

                                <i class="fa fa-check-square" style="color:orangered;font-size:14px" aria-hidden="true"></i><a href="yogaasan.html#Trikonasana"> Triangle Pose (Trikonasana)</a>

                            </li>

                            <li>

                                <i class="fa fa-check-square" style="color:orangered;font-size:14px" aria-hidden="true"></i><a href="yogaasan.html#Pawanmuktasana"> Wind Relieving Pose (Pawanmuktasana)</a>

                            </li>

                            <li>

                            <li>

                                <i class="fa fa-check-square" style="color:orangered;font-size:14px" aria-hidden="true"></i> Camel Pose (Ustrasana )

                            </li>

                        </ul>

                    </div>

                </div>

            </div>

</div>

JavaScript code to do the changes of icon for collapse and expand of Div.

You just need to do the changes of images by finding it.

<script src="scripts/bootstrap.min.js"></script>

    <script type="text/javascript">

        app.initialize();

        $('.collapse').on('shown.bs.collapse', function () {

            $(this).parent().find(".fa-arrow-circle-right").removeClass("fa-arrow-circle-right").addClass("fa-arrow-circle-down");

        }).on('hidden.bs.collapse', function () {

            $(this).parent().find(".fa-arrow-circle-down").removeClass("fa-arrow-circle-down").addClass("fa-arrow-circle-right");

        });

    </script>