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.