JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div ng-app="testApp" ng-controller="testController">
    <ul>
        <li ng-repeat="entry in data" test-directive="entry"></li>
    </ul>
</div>

CSS

p {
    display: none;
}

JavaScript

angular.module('testApp', [])

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

.directive('testDirective', [
function() {
    return {
        restrict: 'A',
        scope: {
            entry: '=testDirective'
        },
        template: '<span>{{entry.title}}</span> ' +
                  '<a ng-click="clicked($event)" href>more?</a>' +
                  '<p>{{entry.description}}</p>',
        link: function(scope, element) {
            var p = jQuery(element.find('p'));
            scope.clicked = function($event) {
                p.slideToggle();
            };
        }
    };
}]);