So since I couldn't get an answer to my question here: How can I open one accordion-group when I click to close another accordion-group? - Maybe it is not possible?
I have been working on a work-around to at least accomplish sort of what I want to do.
Here is my accordion:
<button class="panel accBtn" ng-click="status.isFirstOpen = !status.isFirstOpen;runThat()">Buildings<span class="caret"></span></button>
<accordion class="m3Details">
<accordion-group is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
<accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading>
<li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite" ><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>
</accordion-group>
<accordion-group>
<accordion-heading><span ng-click="runThis()">Offsites<span class="caret"></span></span></accordion-heading>
<li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="y.offsite"><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>
</accordion-group>
</accordion>
The first accordion group starts out disabled, which is unnecessary really since I also have the heading text invisible anyway with the class noQuery
. Then, when I click "Offsites", that group opens which closes the "Buildings" list. Ideally I would like "Buildings" to open again when I close "Offsites" but since that doesn't seem easily doable I have settled for having a couple of ng-click
provide different functionality.
$scope.runThis = function(){
$('.accBtn').css('display','block');
$scope.status.isFirstDisabled;
};
$scope.runThat = function(){
$('.accBtn').css('display','none');
}
The "Buildings" text appears when "Offsites" is clicked, and then "Buildings" disappears when "Buildings" is clicked. I still want one group always open so I would like to disable being able to click "Offsites" when it is open, that way the user can only click "Buildings" when it appears.
But how would I go about programmatically disabling the accordion when the heading is clicked? Or maybe it would be done in some binding way?