JSFiddle - React, Tailwind, and code Playground

by bateast

HTML

<body ng-app="app">
    <div collapsable="click">
        Content<br/>Line2<br/>And so on...
    </div>
</body>

CSS

.title {
    background-color: black;
    color: white;
    cursor: pointer;
}
.content {
    border: 1px solid black; 
    transition: height 0.1s;
    overflow: hidden;
    height: 60px;
}
.collapsed {
    height: 0;
}

JavaScript

angular.module('app', [])
    .directive('collapsable', function() {
        return {
            scope: { title: '@collapsable' },
            transclude: true,
            template: '<div class="title" ng-bind="title" click></div>' +
                      '<div class="content" ng-transclude ' +
                           'ng-class="{ collapsed: collapsed }"></div>',
            controller: function($scope) {
                this.toggle = function() {
                    $scope.collapsed = !$scope.collapsed;
                }
            }
        }
    })
    .directive('click', function() {
        return {
            require: '^collapsable',
            link: function(scope, element, attrs, collapsable) {
                element.bind('click', function() {
                    scope.$apply(function() {
                        collapsable.toggle();
                    });
                });
            }
        }
    });