JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="titleblock">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td class="bluetitle">Metrics</td>
            </tr>
            <tr>
                <td class="rptcategory">Combined SLA</td>
            </tr>
            <tr>
                <td class="rptcategory graycellcolor sub"><a href="#" id="toggleHScat1"><img alt="" src="http://www.synchronizeddesigns.com/filter_hide.gif" id="HScat1" align="absmiddle"/></a>OCIO</td>
            </tr>
            <tr>
                <td class="rptcategory subsub cat1"><a href="#" id="toggleHScat1sub1"><img alt="" src="http://www.synchronizeddesigns.com/filter_hide.gif" id="HScat1sub1" align="absmiddle"/></a> Phone</td>
            </tr>
            <tr>
                <td class="rptcategory subsubsub cat1sub1">Queued for Answer</td>
            </tr>
            <tr>
                <td class="rptcategory subsubsub cat1sub1">Answered &gt; 30 secs</td>
            </tr>
            <tr>
                <td class="rptcategory subsubsub cat1sub1">Abandoned &gt; 30 secs</td>
            </tr>
            <tr>
                <td class="rptcategory graycellcolor subsub cat1"><a href="#" id="toggleHScat1sub2"><img alt="" src="http://www.synchronizeddesigns.com/filter_hide.gif" id="HScat1sub2" align="absmiddle"/></a> Email</td>
            </tr>
            <tr>
                <td class="rptcategory graycellcolor subsubsub cat1sub2">Email Tickets Created</td>
            </tr>
            <tr>
                <td class="rptcategory graycellcolor subsubsub cat1sub2">Created &gt; 60 mins</td>
            </tr>
            <tr>
                <td class="rptcategory subsub cat1" id="cat1sub3"><a href="#" id="toggleHScat1sub3"><img alt="" src="http://www.synchronizeddesigns.com/filter_hide.gif" id="HScat1sub3" align="absmiddle"/></a> Chat</td>
            </tr>
            <tr>
                <td class="rptcategory subsubsub cat1sub3">Queued for...

CSS

body
{
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
height:auto;
}
#rptcontainer
{
	margin: 0 auto;
	width: 100%;
}
.pass
{
	background-color: #c6efce;
	color: #006100;
}
.fail
{
	background-color: #ffc7ce;
	color: #9c0006;	
}
.notapplicable
{
background-color: #999999;
	color: #ffffff;	
}

.inactivea
{
background-color: #deecfc;
border: 1px solid #deecfc;
}

.inactiveb
{
background-color: #dddddd;
}

#headerleft
{
float: left;
width:33%;
text-align: left;
}
#headercenter
{
float:left;
width: 34%;
}
#headerright
{
float: left;
width:33%;
text-align:right;
}
#clear
{
clear: both;
}
#rpttitle
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: bold;
	color: #000000;
	text-align:center;
	padding-top:50px;
}
#rptsubheader
{
	background-color: #4f81bd;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	text-align: center;
	padding:5px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-top: 1px solid #dddddd;

}
.bluetitle
{
	background-color: #4f81bd;
	font-family: Arial, Helvetica, sans-serif;
                font-size:11px;
	text-decoration: underline;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	width: 17%;
	padding:2px;
}
.titlespacer
{
	padding:2px;
}
.blacktitle
{
	background-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	padding:2px;
	text-decoration: underline;
	width: 9%;
}
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid #dddddd;
}
td
{
	padding: 2px;
	text-align: right;
                font-size:11px;
                height: 25px;
white-space:nowrap;
}
.rptcategory
{
	text-align: left;
}
.trendcell
{
text-align:center;
}
#titleblock
{
	float: left;
	width: 17%;
}
#dayblock
{
	float:left;
	width:9%;
}
#dayblocktrend
{
	float:left;
	width:10%;
}
.graycellcolor
{
	background-color: #efefef;
}
.avgtext
{
color:...

JavaScript

$(function(){
    //src vars
    var hide_src = "http://www.synchronizeddesigns.com/filter_hide.gif",
        reveal_src = "http://www.synchronizeddesigns.com/filter_reveal.gif",
            s = '';
	//hide all sublevel elements
	$(".subsub, .subsubsub").hide();
	
	$("a").click(function(e){
		e.preventDefault();
        var tID = e.target.id,
            tClass = '.' + tID.replace('HS', '');
            
		$(tClass).toggle();
        
        if(!$(tClass).is(':visible')){
            s = hide_src;
            
            //for each subcategory
            $(tClass).each(function(){
                //get class names into classes array
                var classes = $(this).attr('class').split(' '),
                    parentClass = '';
                
                //search classes array for class that begins with 'cat'
                for (var j=0; j<classes.length; j++) {
                    if (classes[j].match("cat")){ 
                        parentClass = classes[j];
                    }
                }
                
                //find subsubsub elements that have a class that begins with 'cat#sub'
                var subs = $('[class*=' + parentClass + 'sub]');
                
                //if there are sub elements, hide them too
                if(subs){
                    innerIcons = jQuery.find("a > img[id*="+tID+"sub]");
                    if (innerIcons) {
                        $(innerIcons).attr('src', s);
                    };
                    subs.hide();
                    /*****************************************************
                    NEED HELP HERE !!!!!!!!!!
                    Need a way to reset all hide/show images icon
                    when 'parentClass' hide/show is clicked to close.
                    *****************************************************/
                    
                }
            });
        } else {
            s = reveal_src;
        }
        //Change image src
     ...