JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>
  <div ng-app="testApp" ng-controller="testController">
    <ul>
        <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>
    </ul>
</div>

JavaScript

angular.module('testApp', ['ngAnimate'])
.controller('testController', ['$scope',
function($scope) {
    
    $scope.data = [
        {title: 'title1', description: 'description1'},
        {title: 'title2', description: 'description2'},
        {title: 'title3', description: 'description3'},
        {title: 'title4', description: 'description4'},
        {title: 'title5', description: 'description5'},
    ];
    
}])

.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);
			}
		}
	}
});