1

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?

Community
  • 1
  • 1
Christine268
  • 722
  • 2
  • 13
  • 32

1 Answers1

3

First, stay away from jquery when using angular! Your problem is definitely solvable with just angular.

Second, I'm assuming you're using ui-bootstrap since you're using the accordion directive?

If I understand you correctly, you want to only have one group active at a time so you can only click on the group that is not open and basically toggle the groups. I set up a simple plunker that does this. You have to use the is-disabled attribute on the accordion-group directives and toggle some booleans with ng-click to do this.

allienx
  • 877
  • 6
  • 10
  • You have it basically correct. The one group I don't want users to be able to manually toggle at all (hence why I have it invisible), so it only opens when the other closes. But this is perfect, I will just tweak this code to get it to do what I need! – Christine268 Jun 09 '15 at 14:23