JSFiddle - React, Tailwind, and code Playground

HTML

<!--HTML TRIGGER FOR ONE OF THE MINI NAV LINKS TO SHOW ITS HIDDEN DIV-->
<div class="subTitleNav ulineGray animated bounceInLeft delay-2250"><a href="#subDivTab1" class="subDivSwitchLink">sublink 1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#subDivTab2" class="subDivSwitchLink">sublink 2</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#subDivTab3" class="subDivSwitchLink">sublink 3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#subDivTab4" class="subDivSwitchLink">sublink 4</a>
				</div>

<!--HTML FOR HIDDEN DIVS WITH ACCORDION-->
<!--sublink 1-->
<div id="subDivTab1" class="subDivSwitch">
    <div class="subRightSectionTitle soft">SUBLINK 1
    </div>
    <div class="subRightSectionText ulineGray"><span class="subRightSectionTextHeader soft">Sublink1 Heading</span><br>Sublink1 text.
    </div>
</div>

<!--sublink 2-->
<div id="subDivTab2" class="subDivSwitch">
    <div class="subRightSectionTitle soft">SUBLINK 2
    </div>
    <div class="subRightSectionText ulineGray"><span class="subRightSectionTextHeader">Accordion introduction text...</span>
    </div>
    <div id="drawer" class="softDrawer">
        <ul>
            <li><a href="#" onclick="return false;">ACCORDION TITLE 1</a>
                <ul>
                    <li>Accordion 1 Heading</li>
                    <li>Accordion 1 Text 1<br>Accordion 1 Text 1</li>
                </ul>
            </li>
            <li><a href="#" onclick="return false;">ACCORDION 2 TITLE</a>
                <ul>
                    <li>Accordion 2 Heading</li>
                    <li>Accordion 2 Text 1<br>Accordion 2 Text 1</li>
                </ul>
            </li>
            <li><a href="#" onclick="return false;">ACCORDION 3 TITLE</a>
                <ul>
                    <li>Accordion 3 Heading</li>
                    <li>Accordion 3 Text 1<br>Accordion 3 Text 1</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
            
<!--sublink 3-->
<div id="subDivTab3" class="subDivSwitch">
    <div...

CSS

/* MISC ---- */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {font-family: 'Open Sans', sans-serif; font-weight:300; letter-spacing:1px; color:#4D4D4D; padding-top:0px; }
.soft {color:#4FAEDD !important;}

/* SUB NAV ---- */
.subTitleNav {width:65%; text-align:center; font-size:14px; line-height:17px; margin:0 0 20px 0px; letter-spacing:0px;}
.subTitleNav a {text-decoration:none; font-weight:300; padding:2px 10px 5px 10px; color:#999999;}
.subTitleNav a.subTitleActive {color:#FF8000;}

/* SUBLINK ACCORDION ---- */
#drawer {width:100%; text-align:left; margin-top:-20px;}
#drawer ul { list-style:none; padding:0;}
#drawer > ul > li.has-sub > a:before {font-family:FontAwesome; content:'\f0a7 \00a0';}
#drawer > ul > li.has-sub.active > a:before {font-family:FontAwesome; content:'\f0a6 \00a0';}
#drawer ul ul a {text-decoration:none; color:#FF8000;}
#drawer ul ul a:hover {color:#4D4D4D;}
#drawer ul ul li:nth-child(even) {padding-left:60px; font-size:14px; color:#4D4D4D; line-height:24px;}

/* ACCORDION STYLE ---- */
#drawer.softDrawer > ul > li > a {font-size:16px; display:block; background-color:#4FAEDD; color:#FFF; margin-top:20px; padding:10px; text-decoration:none; line-height:20px;}
#drawer.softDrawer > ul > li > a:hover {text-decoration:none; background-color:#FF8000; color:#FFF;}
#drawer.softDrawer ul ul li:nth-child(odd) {padding-left:30px; font-size:14px; color:#4FAEDD; line-height:18px;}
#drawer.softDrawer ul ul {display:none; list-style:none; padding:10px 0 20px 0; margin:0 0 20px 0; border-left:1px solid #4FAEDD; border-right:1px solid #4FAEDD; border-bottom:1px solid #4FAEDD;}

JavaScript

//JQUERY DIV SWITCH FOR THE MINI NAV

$(function(){
$('a.subDivSwitchLink').click(function (e) {
    var $this = $(this),
    containerSelector = $this.attr('href'),
    $links = $('a.subDivSwitchLink');
    e.preventDefault();
    $('div.subDivSwitch').not(containerSelector).hide();
    $(containerSelector).show();
    $links.not($this).toggleClass('subTitleActive', false);
    $this.toggleClass('subTitleActive', true);
});
var target = '#'+'subDivTab1';
$('a[href="'+target+'"].subDivSwitchLink').click();
});

//JQUERY FOR THE HIDDEN ACCORDION

        $(document).ready(function(){
        $('#drawer > ul > li:has(ul)').addClass("has-sub");
        $('#drawer > ul > li > a').click(function() {
            var checkElement = $(this).next();
            $('#drawer li').removeClass('active');
            $(this).closest('li').addClass('active');   
            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }
            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#drawer ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }
            if (checkElement.is('ul')) {
                return false;
            } else {
                return true;    
            }       
        });
    });