Toggling accordion panel icons with ng-class and ng-click
I would recommend that you check out 'UI Bootstrap' from the AngularUI team. It's a collection of "Bootstrap components written in pure AngularJS".
http://angular-ui.github.io/bootstrap/
Their website features an example which shows their Accordion directive using ng-class
to toggle the chevron icons.
http://angular-ui.github.io/bootstrap/#/accordion
Their directive also features a close-others
attribute which, if true, will ensure only a single panel is open at any one time.
<accordion close-others="true">
This is what I've tried and it seems to work
In my controller I have
$scope.menuStatus = [ { isOpen : true },
{ isOpen : false },
{ isOpen : false } ]
In my html I have
<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>
How about working with CSS? Bootstrap adds a class collapsed
on the html
element that has the data-toggle="collapse"
. When the slide opens, it removes this collapsed
class. We can then work with css
to, for example, rotate the span
element (a child of the 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 : Ensure collapsed
class is added to the element that has the data-toggle="collapse"
attribute for this to work smoothly. Otherwise, on initial loading of the element, the span
element doesn't rotate as expected the first time.