Bootstrap + AngularJS + jQuery - Nested panels "collapse" behaviour failing

Question

I am trying to nest accordion panels which works. However, I want the chevron icon to point down (fa-chevron-down) when the panel-body is collapsed and point right when the panel-body is not collapsed. I wrote a directive to get this effect and it too works.However, when I apply this directive to the nested panel, its working the effect on both the nested and parent panel-heading. What am I doing wrong? Is there a cleaner way to do this?

(function () {
          'use strict';
  
          angular
               .module('myApp', [])
               .directive('bsCollapse', bsCollapse);

          function bsCollapse() {
               var $ = window.$;
               
            var directive = {
                    restrict: 'EA',
                    link: linkFunc,
               };

               return directive;

               function linkFunc(scope, el, attr, ctrl) {
                    $(el[0])
                         .on('hide.bs.collapse', function (evt) {
                              $(evt.currentTarget)
                                   .prev()
                                   .children()
                                   .children()
                                   .removeClass('fa-chevron-down')
                                   .addClass('fa-chevron-right');
                         })
                         .on('show.bs.collapse', function (evt) {
                              $(evt.currentTarget)
                                   .prev()
                                   .children()
                                   .children()
                                   .removeClass('fa-chevron-right')
                                   .addClass('fa-chevron-down');
                         });
               }
          }
})();

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

  </head>

  <body>

    <div class="container">
      <!-- PARENT PANEL GROUP -->
      <div class="panel-group col-sm-6 col-sm-offset-3" id="accordion">

        <!-- PARENT PANEL -->
        <div class="panel panel-default">
          <!-- PARENT PANEL HEADING -->
          <div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button">
            <h4 class="panel-title">
              PARENT PANEL HEADING
              <i class="fa fa-chevron-down fa pull-right"></i>
            </h4>
          </div>
          <!-- PARENT PANEL COLLAPSE BODY -->
          <div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
            <div class="panel-body">
              <!-- NESTED PANEL GROUP -->
              <div class="panel-group" id="accordion2">
                <!-- NESTED PANEL -->
                <div class="panel panel-default">
                  <!-- NESTED PANEL HEADING -->
                  <div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button">
                    <h4 class="panel-title">
                      NESTED PANEL HEADING
                      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                  </div>
                  <!-- NESTED PANEL COLLAPSE BoDY -->
                  <div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel">
                    <div class="panel-body">
                      NESTED PANEL BODY....
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>

        </div>



      </div>


    </div>

    <!-- JS Assets -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
   
  </body>

</html>

I've tried the method mentioned in the answer below. scope, flag and have faced the problem that when quickly opening and closing the panel/accordion, it fails. Please see the sreenshots - they are from the plnkr you've provided. Thanks though.

score 1 · Answer 1 · edited Nov 27 '15 at 05:33

The icons in both the panels are affected is because the $on event is triggered at the same time in both the elements. I have edited your code and added few lines of code in script and used angularjs' ng-class which is lot easier. Here is a plunker demo . Hope it helps.

scipt.js:

scope.flag1 = true;
scope.flag2=true;
scope.parentDiv = function() {
  scope.flag1 = !scope.flag1;
};
scope.nestedDiv = function() {
  scope.flag2= !scope.flag2;
};

HTML:

<h4 class="panel-title">
   PARENT PANEL HEADING
<i ng-class="{'fa fa-chevron-down': flag1, 'fa fa-chevron-right': !flag1}" class="pull-right"></i>
        </h4>

<h4 class="panel-title">
   NESTED PANEL HEADING
 <i ng-class="{'fa fa-chevron-down': flag2, 'fa fa-chevron-right': !flag2}" class="pull-right"></i>
                </h4>

Thank you. However, this solution doesn't work for me primarily because on quickly clicking, the `class names` go haywire... — Aakash, Nov 27 '15 at 07:26

score -1 · Answer 2 · edited May 23 '17 at 12:30

I've found a CSS solution to this. Thankfully, Bootstrap throws in a collapsed class to the panel-heading. From there I can add this style which adds the chevron-right to :before pseudo class. Also, this doesn't require directive or AngularJS code.

Thank you stackoverflow for reference to this :

Use Font Awesome Icons in CSS

div.panel-heading i {
  position: relative;
}
div.panel-heading.collapsed i:before {
  content: "\f054";
  font-family: FontAwesome;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body>

  <div class="container">
    <!-- PARENT PANEL GROUP -->
    <div class="panel-group col-sm-6 col-sm-offset-3" id="accordion">

      <!-- PARENT PANEL -->
      <div class="panel panel-default">
        <!-- PARENT PANEL HEADING -->
        <div class="panel-heading" data-parent="#accordion" data-target="#collapseOne" data-toggle="collapse" role="button">
          <h4 class="panel-title">
              PARENT PANEL HEADING
              <i class="fa fa-chevron-down fa pull-right"></i>
            </h4>
        </div>
        <!-- PARENT PANEL COLLAPSE BODY -->
        <div bs-collapse class="panel-collapse collapse in" id="collapseOne" role="tabpanel">
          <div class="panel-body">
            <!-- NESTED PANEL GROUP -->
            <div class="panel-group" id="accordion2">
              <!-- NESTED PANEL -->
              <div class="panel panel-default">
                <!-- NESTED PANEL HEADING -->
                <div class="panel-heading" data-parent="#accordion2" data-target="#nestedCollapseOne" data-toggle="collapse" role="button">
                  <h4 class="panel-title">
                      NESTED PANEL HEADING
                      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <!-- NESTED PANEL COLLAPSE BoDY -->
                <div bs-collapse class="panel-collapse collapse in" id="nestedCollapseOne" role="tabpanel">
                  <div class="panel-body">
                    NESTED PANEL BODY....
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>

      </div>



    </div>


  </div>

  <!-- JS Assets -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

</body>

</html>

Bootstrap + AngularJS + jQuery - Nested panels "collapse" behaviour failing

2 Answers2