JSFiddle - React, Tailwind, and code Playground

HTML

<article ng-app="angularSlideables">
    <h1 ng-click="is_open = !is_open" >Click here for Main Content</h1>
    
    <div slider="is_open">
        <p>Bespoke aesthetic Bushwick craft beer. Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
        <p >Coded @ Kinfolk Studios in Williamsburg, Brooklyn, 2013.</p>


        <h2 ng-click="is_open2 = !is_open2" >Click here for Embedded Content</h2>
        <div slider="is_open2">
          <p>Embedded content not previosuly seen.</p>
          
        </div>
        <p>Footer information & Lorem Ipsum.</p>
        
    </div>
</article>

CSS

h1, h2 {cursor:pointer; }
h2, p {
  margin: 5px;
  padding: 5px;
}

JavaScript

angular.module('angularSlideables', [])
 .directive('slider', function () {
        return {
            restrict:'A',
            compile: function (element) {
                // wrap tag
                var contents = element.html();
                element.html('<div class="slideable_content" style=" margin:0 !important; padding:0 !important" >' + contents + '</div>');

                return function postLink(scope, element, attrs) {
                    var i = 0;
                    // default properties
                    scope.$watch(attrs.slider, (n, o) => {
                        if (n !== o) {
                            i++;
                            var target = element[0],
                                content = target.querySelector('.slideable_content');
                            if(n) {
                                content.style.border = '1px solid rgba(0,0,0,0)';
                                var y = content.clientHeight, z = i;
                                content.style.border = 0;
                                target.style.height = y + 'px';
                                setTimeout(() => {
                                    if (z === i) {
                                        target.style.height = 'auto';   
                                    }
                                }, 500);
                            } else {
                                target.style.height = target.clientHeight + 'px';
                                setTimeout(() => {
                                    target.style.height = '0px';
                                });
                            }
                        }
                    }); 

                    attrs.duration = (!attrs.duration) ? '0.5s' : attrs.duration;
                    attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                    element.css({
                        'overflow': 'hidden',
                        'height': '0px',
          ...