Switch accordion panel icons with ng class and ng-click

Question

I have an accordion with chevron icons that switch up or down when pressed, this is done using ng-click and ng-class . The accordion allows you to open one panel at a time - so when I click on a panel to close, the panel closes. But how do I switch the chevron icon to an open panel that closes with ng-click ?

Initially, I could do this with DOM manipulation, etc., but since this is a partial view in angular, I cannot do this.

the code:

 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen"> <i class="glyphicon" ng-class="{'glyphicon-chevron-up': firstpaneisopen, 'glyphicon-chevron-down': !firstpaneisopen}"></i> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Body </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" ng-click="secondpaneisopen=!secondpaneisopen> <i class="glyphicon" ng-class="{'glyphicon-chevron-up': secondpaneisopen, 'glyphicon-chevron-down': !secondpaneisopen}"></i> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Body </div> </div> </div> </div> 

Answer 1

I would recommend you check out the "UI Bootstrap" from the AngularUI team. This is a collection of "Bootstrap Components written in pure AngularJS."

http://angular-ui.imtqy.com/bootstrap/

An example is presented on their website that shows their Accordion directive using ng-class to switch chevron icons.

http://angular-ui.imtqy.com/bootstrap/#/accordion

Their directive also has a close-others attribute, which, if true, ensures that only one panel is open at any time.

 <accordion close-others="true"> 

Answer 2

This is what I tried and it seems to work

In my controller I have

 $scope.menuStatus = [ { isOpen : true }, { isOpen : false }, { isOpen : false } ] 

In my html i

 <accordion id='cntLeftMenu' close-others='false'> <accordion-group is-open='menuStatus[0].isOpen'> <accordion-heading class='menu-title'> Cars <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[0].isOpen , 'glyphicon-chevron-right': !menuStatus[0].isOpen }"></i> </accordion-heading> <ul class='left-menu'> <li><a href=''>test1</a></li> <li><a href=''>test1</a></li> <li><a href=''>test1</a></li> </ul> </accordion-group> <accordion-group is-open='menuStatus[1].isOpen'> <accordion-heading class='menu-title'> Customers <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[1].isOpen , 'glyphicon-chevron-right': !menuStatus[1].isOpen }"></i> </accordion-heading> <ul class='left-menu'> <li><a href=''>test1</a></li> <li><a href=''>test1</a></li> <li><a href=''>test1</a></li> </ul> </accordion-group> <accordion-group is-open='menuStatus[2].isOpen'> <accordion-heading class='menu-title'> Staff <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[2].isOpen , 'glyphicon-chevron-right': !menuStatus[2].isOpen }"></i> </accordion-heading> <ul class='left-menu'> <li><a href=''>test1</a></li> <li><a href=''>test1</a></li> <li><a href=''>test1</a></li> </ul> </accordion-group> <accordion> 

Answer 3

How to work with CSS? . Bootstrap adds the collapsed class to the html element, which has data-toggle="collapse" . When the slide opens, it removes this collapsed class. Then we can work with css , for example, to rotate the span element (a child element that has the data-toggle attribute).

 <style> button.collapsed span { transform: rotate(-90deg); } </style> <button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo"> Simple collapsible <span class="glyphicon glyphicon-chevron-down"></span> </button> <div id="demo" class="collapse"> Lorem ipsum dolor... </div> 

IMPORTANT NOTE ! Make sure the collapsed class is added to the element with the data-toggle="collapse" attribute so that it works smoothly. Otherwise, when the element is booted, the span will not rotate as expected for the first time.

Answer 4

Was there any research, I was able to use this method to add the open class to the panel-header when it is open. This is an example that allows you to open multiple panels and use Angular Strap Collapse .

Template:

 <div class="panel-group" role="tablist" data-ng-model="multiplePanels.activePanels" data-allow-multiple="true" data-bs-collapse> <div class="panel panel-default" ng-repeat="location in locations"> <div class="panel-heading" role="tab" data-ng-class="{'open' : multiplePanels.activePanels.indexOf($index) > -1}" bs-collapse-toggle> <h3>Some Header Stuff</h3> </div> <div class="panel-collapse" role="tabpanel" bs-collapse-target> <div class="panel-body"> <p>Stuff in the panel body...</p> </div> </div> </div> </div> 

JS in the controller:

 $scope.multiplePanels.activePanels = []; 

Answer 5

The simplest solution I've ever thought of. And do not use any controller,

 <div class="fa fa-fw list-arrow" ng-class="{'fa-angle-down': isClicked, 'fa-angle-right' : !isClicked}" ng-click="isClicked = !isClicked"> </div> 

You can write like me.

Answer 6

After some research, I have one way to solve this problem.

JS:

 $scope.firstpaneisopen = false; $scope.secondpaneisopen = false; 

Changed ng-click on the first panel:

 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen; secondpaneisopen=false"> 

vice versa in the second panel.

I don’t think this is some kind of elegant solution, especially if we have more than two panels, but it works.

Answer 7

You can use bootstrap (tested in 4+) to minimize the following styles to switch the button;

 <style> [id^='particon'] { display: block !important; } [id^='particon']:after { font-family: 'Glyphicons Halflings'; color: grey; } [id^='particon'].collapse:after { content: "\e081"; } [id^='particon'].collapse.show:after { content: "\e082"; } /*optional*/ [id^='particon'].collapsing { transition: none; } </style> 

For a fully working snipplet;

https://js.do/code/changecollapseicon