I am currently utilizing the Angular UI Bootstrap accordion feature, which can be found here.
<div ng-controller="AccordionDemoCtrl">
<div accordion close-others="oneAtATime">
<div accordion-group heading="Static Header, initially expanded" is-open="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aspernatur consequuntur sed pariatur laborum officiis asperiores repellat velit, omnis. Voluptate, illum animi? Veniam odit nemo repudiandae id blanditiis similique ullam consequuntur harum aut possimus deserunt sit odio sapiente, dolorum dolor!
</div>
<div accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</div>
<div accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group grows to fit the contents</p>
<button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</div>
</div>
<div class="checkbox">
<input type="checkbox" ng-model="oneAtATime"> <label class="checkbox">Open only one at a time</label>
</div>
</div>
The controller code is quite simple, and can be viewed here for those interested.
My goal is to have a disclosure triangle displayed next to the accordion headers, indicating whether the pane is open or closed.
I have implemented all necessary LESS/CSS adjustments to incorporate a unicode character using the pseudo-class "before". I have created distinct classes for open and closed states.
The challenge I am facing is how to easily identify if a specific header has an open pane. The class toggling occurs on the content rather than the headers. My aim is to use a class instead of a basic toggle to ensure it functions correctly even if the pane is defaulted to being opened.
Any suggestions?