JSFiddle - React, Tailwind, and code Playground

by LostInDaJungle

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div class="showhide" ng-app="emc">
    <div class="less">
        <p>This is less text. It shows when our div is collapsed/closed.</p>
    </div>
    <div class="more">
        <p>This is more text. This is what shows when you click "More..."</p>
    </div>
    <div class="show"><a href="#"></a>
    </div>
</div>

CSS

.showhide {
    display: inline-block;
    width: 90%;
    padding: 5px 3%;
}
.showhide > .less {
}
.showhide > .more {
}
.showhide > .show {
    margin: 0px 75%;
    border: 1px solid #CCCCCC;
    padding: .3em;
    width: 20%;
    text-align: center;
    position: relative;
    top: 10px;
    background: white;
}
.showhide.opened > .more {
    display: block;
}
.showhide.closed > .more {
    display: none;
}
.showhide.closed > .show a:after {
    content:'More...';
}
.showhide.opened > .show a:after {
    content:'Less...';
}

JavaScript

var emc = angular.module('emc', []);
emc.directive('showhide', function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            // find our "show" div
            var show = angular.element(element.find('.show'));
            opened = true;
            show.bind('click', toggle);

            function toggle() {
                opened = !opened;
                element.removeClass(opened ? 'closed' : 'opened');
                element.addClass(opened ? 'opened' : 'closed');
            }
            toggle();
        }
    }
});