Implementing expand all button in Bootstrap UI accordion

Question

I am using uib-accordion directive and I want to add a button to expand/close all elements in the accordion. My code is like this:

<uib-accordion close-others="false">
    <div align="right">
      <a href="" ng-click="showFunc = !showFunc"> {{ showFunc ? "Hide all" : "Show all" }} </a>
    </div>
    <uib-accordion-group is-open="showFunc" ng-repeat="fun in functions" heading="{{ fun.name }}" is-disabled="!fun.show">
    </uib-accordion-group>

What happens is when I click the expand all button works as far as you dont click each panel individually, what creates the variable showFunc inside the scope of the panel and the is-show directive gets it from there.

How it could be done? I am using angular 1.6.2

Thanks.

Answer 1

I think you are mixing different variables in different contexts (each iteration of ngRepeat creates a different context and you mistakenly(?) assign each a different showFunc variable) and making a mess.

What you can do is assign a variable that will be global to the accordion, toggle it on button click and then assign all is-open object properties to that value, I bind an open property to each object so I could easily traverse the objects and access it.

HTML

<div uib-accordion-group is-open="fun.open" ng-repeat="fun in funcs" class="panel-default"
     heading="{{ fun.name }}">
  {{fun.name}}
</div>

JS

$scope.allOpen = false; // all are closed

// call this function on button click
$scope.openAll = function() {
    $scope.allOpen = !$scope.allOpen; // toggle here 

    $scope.funcs.forEach((f) => {
        f.open = $scope.allOpen;
    });
}; 

Using forEach for simplicity

Demo plunker