JSFiddle - React, Tailwind, and code Playground
HTML
<div id="accordion">
<h3 class="outerMenuItem">OuterItem1</h3>
<ul id="statusId">
<li><a class="innerMenuItem" href="#!">Inner Item 1</a></li>
<li><a class="innerMenuItem" href="#!">Inner Item 2</a></li>
<li><a class="innerMenuItem" href="#!">Inner Item 3</a></li>
</ul>
<h3 class="outerMenuItem">OuterItem2</h3>
<ul id="networkId">
<li><a class="innerMenuItem" href="#!">Inner Item 1</a></li>
<li><a class="innerMenuItem" href="#!">Inner Item 2</a></li>
</ul>
</div>
CSS
#accordion .ui-icon{
display:none;
}
#accordion .ui-accordion-header{
height:30px;
position: relative;
z-index: 3;
width:200px;
}
#accordion .ui-accordion-header:hover{
color:#eb5e13;
}
#accordion .ui-accordion-header .ui-state-active{
color:#eb5e13;
}
#accordion .ui-accordion-content {
position: relative;
z-index: 6;
width:180px;
color:#eb5e13;
}
#accordion .ui-accordion-header:active{
color:#eb5e13;
}
a{
color: #3f3f4e;
font-weight: bold;
padding-left:15px;
}
a.innerMenuItem{
color: #363545;
}
a.innerMenuItemOnClick{
color:#eb5e13 !important;
}
JavaScript
$("#accordion").accordion({collapsible:true, active:0, heightStyle: "content"});
$(document).on("click",".outerMenuItem",function(){
$(".innerMenuItem").removeClass("innerMenuItemOnClick");
var currentlyActive=$( "#accordion" ).accordion( "option", "active" );
console.log("Current tab no. "+currentlyActive);
if(currentlyActive===0){
console.log($("#statusId li:first-child").text());
$("#statusId li:first-child a").addClass("innerMenuItemOnClick");
}
else if(currentlyActive===1){
$("#networkId li:first-child a").addClass("innerMenuItemOnClick");
}
else {
$("#protocolParameters").load("/404.html .someError");
}
});
$(document).on("click",".innerMenuItem",function () {
$(".innerMenuItem").removeClass("innerMenuItemOnClick");
$(this).addClass("innerMenuItemOnClick");
});