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

Tome Pejoski · Accepted Answer · 2016-02-05 11:31:34Z

9

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

edited Feb 5, 2016 at 11:31

answered Jan 31, 2014 at 23:55

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

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

Comments

Ritu Shikha Singh · Accepted Answer · 2017-04-21 06:53:05Z

  <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

chonerman · Accepted Answer · 2014-01-31 22:22:39Z

-5

jQuery UI has a similar method you could use?

http://jqueryui.com/accordion/

answered Jan 31, 2014 at 22:22

chonerman

13511 bronze badges

4 Comments

user2832814 Over a year ago

Yes, unfortunately the team does not want to use jquery :(

Philipp Gayret Over a year ago

@user2832814 You've referenced bootstrap, and you use AngularJS, if you are using both you should use angular-ui.github.io/bootstrap

Brian Vanderbusch Over a year ago

@user2832814 you should tell them jQuery is built into angular. It is. It really is. docs.angularjs.org/misc/faq. In fact it will forgo it's own jquery implementation (called jqlite), if query is present when angular is bootstrapped.

Pylinux Over a year ago

To say that jQuery is built into angular is like saying that your car has a built in jet engine when in reality you only have a desktop fan. Just because the desktop fan will be automatically replaced when you add the jet engine does not mean you had a jet engine all along. jqlite is a TINY utility that mimic a subset of some jQuery functions. (And in this example don't think of the jet engine as jQuery is fast, think of it as a jet engine is really heavy)

Collectives™ on Stack Overflow

Accordion using AngularJS and CSS animations

3 Answers 3

Comments

Cytrus Pay

Amazon Web Services

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Cytrus Pay

Amazon Web Services

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related