JSFiddle - React, Tailwind, and code Playground

by Dmitry Ishkov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>
<body ng-app="myApp" ng-controller="MyCtrl">
  <div ng-click="widgetExpanded = !widgetExpanded" class="head">
    Click to slide in/out
  </div>
  <div ng-slide-down="widgetExpanded" lazy-render duration="1">
    <div class="content">
      Some awesome content here
    </div>
  </div>
  <div class="footer">
    After content
  </div>
</body>

CSS

div {
    /*background-color: gray;*/
    margin-left: auto;
    margin-right: auto;
    font-size: 25px;
}
.head, .content, .footer {
    width: 240px;
    padding: 5px;
    border: 2px solid;
}
.head {
    cursor: pointer;
    background-color: #a5fb88;
    border-bottom: none;
}
.content {
    border-top: none;
    border-bottom: none;
}
.footer {
    background-color: #3ac1ff;
    border-top: none;
}

JavaScript

(function () {
  'use strict';
  angular.module('ng-slide-down', []).directive('ngSlideDown', [
    '$timeout',
    function ($timeout) {
      var getTemplate, link;
      getTemplate = function (tElement, tAttrs) {
        if (tAttrs.lazyRender !== void 0) {
          return '<div ng-if=\'lazyRender\' ng-transclude></div>';
        } else {
          return '<div ng-transclude></div>';
        }
      };
      link = function (scope, element, attrs, ctrl, transclude) {
        var closePromise, duration, elementScope, emitOnClose, getHeight, hide, lazyRender, onClose, show;
        duration = attrs.duration || 1;
        elementScope = element.scope();
        emitOnClose = attrs.emitOnClose;
        onClose = attrs.onClose;
        lazyRender = attrs.lazyRender !== void 0;
        if (lazyRender) {
          scope.lazyRender = scope.expanded;
        }
        closePromise = null;
        element.css({
          overflow: 'hidden',
          transitionProperty: 'height',
          transitionDuration: '' + duration + 's',
          transitionTimingFunction: 'ease-in-out'
        });
        getHeight = function (passedScope) {
          var c, children, height, _i, _len;
          height = 0;
          children = element.children();
          for (_i = 0, _len = children.length; _i < _len; _i++) {
            c = children[_i];
            height += c.clientHeight;
          }
          return '' + height + 'px';
        };
        show = function () {
          if (closePromise) {
            $timeout.cancel(closePromise);
          }
          if (lazyRender) {
            scope.lazyRender = true;
          }
          return element.css('height', getHeight());
        };
        hide = function () {
          element.css('height', '0px');
          if (emitOnClose || onClose || lazyRender) {
            return closePromise = $timeout(function () {
              if (emitOnClose) {
                scope.$emit(emitOnClose, {});
              }
              if...