JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div class="showhide" ng-app="emc">
    <ol>
        <li>For best results, complete search in following order
            <ol type="A">
                <li class="less" >B-code or offer code (<a href="assets/img/gc_offer_rio.JPG" target="_blank" title="gc_offer_rio.JPG">Screenshot</a>)
                    <ol>
                        <li><strong>Note:</strong>&nbsp;If information is not available on Receivers tab, it may appear on Activation tab &gt; Programming section. (<a href="assets/img/gc_offer_rio_prog_tab.JPG" target="_blank" title="gc_offer_rio_prog_tab.JPG">Screenshot</a>)</li>
                    </ol>
                </li>
                <li class="more">Dealer ID
                    <ol>
                        <li>Dealer ID is found on Account Tab (expanded) locate Dealer field for Dealer ID number (e.g. 1721271)</li>
                        <li><strong>Do not</strong>&nbsp;use for Winback offers.</li>
                        <li>Some Dealer IDs apply to multiple offers, which is too long to list in offer page or Guidance Locator results.</li>
                    </ol>
                </li>
                <li class="more">DNIS (available on OMS order history screen)</li>
                <li class="more">Offer name (e.g. Wireless bridge, Best Buy, Costco, etc.)</li>
            </ol>
        </li>
       
    </ol>
     <p>If the MyCSP Page for the offer is found, follow offer guidance.</p>
    <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();
        }
    }
});