Accordion using AngularJS and CSS animations

Question

Using just Angular JS Animate and Css Animation, I am trying to create an Expand/Collapse (Accordion) similar to the bootstrap collapse seen here: http://getbootstrap.com/javascript/#collapse

I have an issue with the expandable items, they pop back and forth depending on height of the expanded "show" content. See my Plunker for more a visual

My work so far:

var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);

expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
    $scope.active = true;
    $scope.active1 = true;    
});

http://plnkr.co/edit/wBYsFM?p=info

Answer 1

You should use UI Bootstrap Accordion. This component is written in pure AngularJS.

Answer 2

  <div class="list card benefit-listCard">
    <h3 class="accordion" ng-class="{active:accordion1}">
<a href ng-click="accordion1=!accordion1" style="padding:0px;"><div class="item item-avatar benefit-itemAvatar">
    <img src="img/aws.png" class="service-img">
    <h2>Amazon Web Services</h2>
    <button class="button button-small button-outline button-calm detail-button">Get Deals</button> <div 
  class="fa fa-fw list-arrow" ng-class="{'ion-minus-circled': accordion1, 'ion-plus-circled' : !accordion1}" style="float:right;color:#44c8f5;font-size:25px;margin-top:10px;">
  </div>
  </div>
</a>

Lorem Ipsum1

Cytrus Pay

Get Deals Lorem Ipsum2.

Amazon Web Services

Get Deals Lorem Ipsum 3

Answer 3

jQuery UI has a similar method you could use?

http://jqueryui.com/accordion/