Alternatively, you can use AngularJS's $animate
:
.animation('.slide', function() {
var NG_HIDE_CLASS = 'ng-hide';
return {
beforeAddClass: function(element, className, done) {
if(className === NG_HIDE_CLASS) {
element.slideUp(done);
}
},
removeClass: function(element, className, done) {
if(className === NG_HIDE_CLASS) {
element.hide().slideDown(done);
}
}
}
});
Use ng-hide
or ng-show
to show or hide the description.
<li ng-repeat="entry in data">
<span>{{entry.title}}</span>
<a ng-click="expand = !expand" href="#">more?</a>
<p class="slide" ng-show="expand">{{entry.description}}</p>
</li>
See JSFiddle
P.S. you must include jquery
and angular-animate.js