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.
2 answers
solution1
0 2015-11-27 05:28:15
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>
solution2
0 2015-11-27 08:32:18
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 :
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.