You should use UI Bootstrap Accordion. This component is written in pure AngularJS.
Accordion using AngularJS and CSS animations
-
05-10-2022 - |
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;
});
Solution
OTHER TIPS
<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 3jQuery UI has a similar method you could use?
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow