Geek Answers Handbook

Expand several accordion groups at once

I have the following accordion (using angular -ui-bootstrap ) inside a looped element:

<div data-ng-repeat="m in results"> <div class="stuff_in_the_middle"> <accordion id="accordion_{{$index+((currentPage-1)*20)+1}}" close-others="false"> <accordion-group> [...stuff...] </accordion-group> <accordion-group> [...stuff...] </accordion-group> <accordion-group> [...stuff...] </accordion-group> </accordion> <span id="toggle_{{$index+((currentPage-1)*20)+1}}" onClick="openAllGroups">Toggle groups</span> </div> </div>

I would like to know how to expand all accordion-group elements at once with one click of a Toggle link. Is it possible?

0
source share
1 answer

You can create your own collapseall directive for accordion groups. In this directive, you can set the scope isOpen variable (created by angular -ui) to the value from your parent controller and the switch button for all.

EDIT: working demo here ( http://plnkr.co/edit/JOOZek2QBSmxIj2pXCkK?p=preview )

Js

 .controller('MyCtrl', ['$scope', function($scope) { $scope.opened = false; }]) .directive('collapseall', [function() { return { restrict: 'A', scope: { collapseall: '=' }, link: function(scope, elem, attrs) { scope.$watch('collapseall', function(newval, oldval) { scope.isOpen = newval; }) } } } ])

HTML

 <div> <accordion close-others="false"> <accordion-group heading="Item 001" collapseall="opened"> </accordion-group> <accordion-group heading="Item 002" collapseall="opened"> </accordion-group> <accordion-group heading="Item 003" collapseall="opened"> </accordion-group> </accordion> <button class="btn" ng-click="opened=!opened">Toggle groups</button> </div>
+2
source

More articles:


All Articles