angularjs ui-bootstrap accordion does't make smooth transition / slide

Question

I am trying to use angularjs ui bootstrap accordion to built a nested accordion. Although the nested accordion works fine, the transitions from item to another one is too strict, i.e. transitions are not smooth as shown in the https://angular-ui.github.io/bootstrap/ website.

My code is here http://plnkr.co/edit/bTYLBXKHVXbDfElTcb0U?p=preview

angular.module('plunker', ['ui.bootstrap'])
.controller("AccordionDemoCtrl",["$scope", function ($scope) {
  $scope.staticTitle = "Static Title";

  $scope.groups = [
    { title: "Dynamic Title 1", content: "Dynamic content 1" }, 
    { title: "Dynamic Title 2", content: "Dynamic content 2" }
  ];
}]);

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
  <script src="script.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="AccordionDemoCtrl">
    <uib-accordion>
      <uib-accordion-group heading="staticTitle">
        <uib-accordion>
          <uib-accordion-group heading="new heading">new content</uib-accordion-group>
          <uib-accordion-group heading="new heading 2">new content 2</uib-accordion-group>
        </uib-accordion>
      </uib-accordion-group>
      <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</uib-accordion-group>
    </uib-accordion>
  </div>
</body>

</html>

I am looking for a smooth transition solution for the accordion.

Am I missing something or is this the way how accordion works?

Any help is welcomed

punov · Accepted Answer · 2015-10-24 09:19:53Z

3

You need ngAnimate for this, it's required from version 1.13.0 ui-bootstrap. Add it as a script tag and inject in your app. I've created plunkr with the solution.

angular.module('plunker', ['ui.bootstrap','ngAnimate'])
.controller("AccordionDemoCtrl",["$scope", function ($scope) {
  $scope.staticTitle = "Static Title";

  $scope.groups = [
    { title: "Dynamic Title 1", content: "Dynamic content 1" }, 
    { title: "Dynamic Title 2", content: "Dynamic content 2" }
  ];
}]);

edited Oct 24, 2015 at 9:19

answered Oct 24, 2015 at 9:11

punov

8389 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tempx Over a year ago

thank you very much for prompt reply @punov. this definitely solved the smoothness issue. however during the heading transition, previously heading in the group stays open. (on the plunkr you provided click on the "new heading 2" under "staticTitle" then click "Dynamic Title 2" then click "staticTitle" again. you will notice that "new heading 2" is already open). can you recommend a solution for this also? thank you very much.

Collectives™ on Stack Overflow

angularjs ui-bootstrap accordion does't make smooth transition / slide

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related