Expand Many Accordion Groups At Once

Question

I have the following accordion (using angular-ui-bootstrap) inside a paginated loop of elements:

Solution 1:

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

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

Baca Juga

<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>

JavaScript Sample

Expand Many Accordion Groups At Once

Solution 1:

Post a Comment for "Expand Many Accordion Groups At Once"