CODEWITHSUNDEEP
angularjs
kipris
kipris

Reputation: 3039

Angular accordion: animate toggle

Can someone advice how to do accordion that toggles with animation and if I click on 1st div, only the 1st panel will show? http://plnkr.co/edit/LdBVT0zbYdshITwr3qjh?p=preview

Upvotes: 0

Views: 4324

Answers (3)

Michal Kucaj
Michal Kucaj

Reputation: 691

Here is a solution for your problem in gennerally when you working with ng-repeat you could manipualte in your fucntions $index value of your arrray

[http://plnkr.co/edit/gBJPcFNIgUTWo5gdZzUb?p=preview`][1]

//JS

$scope.toggle = function($index) {
  $scope.index = $index;
};

//AND IN HTML SIMPLE TOGGLE CLASS

  <div class="repeated-item" data-ng-class="{'open-accordion' : index === $index}" ng-model="accordionContent" >

Upvotes: 0

T J
T J

Reputation: 43166

Instead of re-inventing the wheel, use ui bootstrap's accordion directive. It comes with a lot of options for customization.

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {
  $scope.oneAtATime = true;
  $scope.isFirstOpen = true;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>

<div ng-app="ui.bootstrap.demo" ng-controller="AccordionDemoCtrl">
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="Static Header, initially expanded" is-open="isFirstOpen">
      This content is straight in the template.
    </uib-accordion-group>
    <uib-accordion-group heading="Another Static Header">
      This content is straight in the template.
    </uib-accordion-group>
  </uib-accordion>
</div>

official plunker demo

Upvotes: 0

etee
etee

Reputation: 86

  <body ng-controller="Ctrl">
    <div ng-repeat="item in items">
      <div class="accordion" ng-click="show=show==true? false:true;">
        {{item.id}}
      </div>
      <div class="repeated-item" ng-model="accordionContent" ng-show="show">
        {{item.name}}
      </div>
    </div>
  </body>

You don't need controller for this purpose, it can be handled directly using directives Plunker Demo

Upvotes: 1

Related Questions