JSFiddle - React, Tailwind, and code Playground

by dsuni5

HTML

<div id="content-left" style="float: left; width: 23%;">
    <div class="DNNContainer_noTitle container_style_a" style="line-height: 1.231;">
         <h4>Topics</h4>

        <div id="cssmenu">
            <ul id="left-links">
                <li class="active topics has-sub"> <a id="intro_loggingon" href="#">Introduction</a>

                    <ul>
                        <li class="topics"> <a id="intro_loggingon" href="#intro_loggingon">Logging On to CWS/CMS</a>

                        </li>
                        <li class="topics"> <a id="intro_screenintro" href="#intro_screenintro">CWS/CMS Screen Introduction</a>

                        </li>
                        <li class="topics"> <a id="intro_sections" href="#intro_sections">CWS/CMS Sections</a>

                        </li>
                        <li class="topics"> <a id="intro_fields" href="#intro_fields">CWS/CMS Fields</a>

                        </li>
                        <li class="topics"> <a id="intro_savingwork" href="#intro_savingwork">Saving Your Work</a>

                        </li>
                        <li class="topics"> <a id="intro_searches" href="#intro_searches">Searches</a>

                        </li>
                        <li class="topic"> <a id="intro_docsreports" href="#intro_docsreports">Documents and Reports</a>

                        </li>
                    </ul>
                </li>
                <li class="topics has-sub"> <a id="referral_clientreporter" href="#">Referral</a>

                    <ul>
                        <li class="topics"> <a id="referral_clientreporter" href="#referral_clientreporter">Client/Reporter Information</a>

                        </li>
                        <li class="topics"> <a id="referral_allegation" href="#referral_allegation">Recording Allegation &amp; Determine Response</a>

                        </li>
                        <li class="topics"> <a id="referral_crossreport"...

CSS

#menu-links {
    list-style: none;
    padding: 2px;
}
#menu-links > li {
    display: block;
    list-style: none;
}
#menu-links > li > span {
    display: block;
    color: #fff;
    margin: 4px 0;
    padding: 6px;
    background: url(images/expand_arrow.png) no-repeat 99.5% 6px #525252;
    background-size: 20px;
    font-weight: normal;
    cursor: pointer;
    font-size: 16px;
}
#menu-links > li > div {
    list-style: none;
    padding: 6px;
    display: none;
    overflow: auto;
}
#menu-links > ul li {
    font-weight: normal;
    cursor: auto;
    padding: 0 0 0 7px;
}
#menu-links a {
    text-decoration: none;
}
#menu-links li > span:hover {
}
#menu-links li > span.active {
    background: url(images/collapse-arrow.png) no-repeat 99.5% 6px #000;
    background-size: 20px;
}
@import url(http://fonts.googleapis.com/css?family=Raleway:400, 200);
 #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#cssmenu {
    width: 252px;
    font-family: Raleway, sans-serif;
    color: #ffffff;
}
#cssmenu ul ul {
    display: none;
}
#cssmenu > ul > li.active > ul {
    display: block;
}
.align-right {
    float: right;
}
#cssmenu > ul > li > a {
    padding: 16px 22px 16px 22px;
    cursor: pointer;
    z-index: 2;
    font-size: 12px;
    text-decoration: none;
    color: #ffffff;
    background: #006699;
    -webkit-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
    color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
    position: absolute;
    right: 26px;
    top: 19px;
    z-index: 5;
    display: block;
    height: 10px;
    width: 2px;
    background: #ffffff;
    content:"";
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all...

JavaScript

$(document).ready(function () {
    var all_divs = $("div[id*='section']").hide();

    var all_links = $("a[id*='section']");

    $('.topics a').click(function (e) {
        var thisDiv = $(this).parent().find("div[id*='section']"),
            isShowing = thisDiv.is(":visible");

        $("ul[id='left-links'] a").removeClass("highlight");
        $(this).addClass("highlight");

        //alert(all_links);
        //alert($(this).attr('id'));
        // Hide all spans
        all_divs.hide();
        // all_divs.removeClass("highlight");

        // If our span *wasn't* showing, show it
        if (!isShowing) {
            thisDiv.show();
        }

        e.preventDefault();

        var showDiv = "#section-" + $(this).attr('id');


        //  alert(showDiv);
        $(showDiv).show();
    });

});


(function ($) {
    $(document).ready(function () {

        $('#cssmenu li.active').addClass('close');
        $('#cssmenu li.has-sub>a').on('click', function () {
            $(this).removeAttr('href');
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp(200);
            } else {
                element.addClass('open');
                element.children('ul').slideDown(200);
                element.siblings('li').children('ul').slideUp(200);
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp(200);
            }
        });
        $('#cssmenu topics:first a').trigger('click');
    });
})(jQuery);