JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
<li class="accordion">
    <a href="#tab1">Bar</a>
    <ul class="sub" >
        <li>lorem </li>
        <li>ipsum </li>
        <li>Lorem Ipsum </li>
        <li>Dolor Sit Amet </li>
    </ul>
</li>
<li class="accordion">
    <a href="#tab2">Bar</a>
    <ul class="sub" >
        <li>lorem </li>
        <li>ipsum </li>
        <li>Lorem Ipsum </li>
        <li>Dolor Sit Amet </li>
    </ul>
</li>
</ul>

CSS

ul.sub > li.active {background:#EFEFEF;} ul.tabs> li.active {background:hotpink;}

ul.sub{
  display: none
}
a.on-hover + ul.sub{
  display: block !important;
}

JavaScript

$("ul.tabs > li").click(function() {
    // remove .active from all li descendants
    $("ul.tabs li").not(this).removeClass("active");

    $(this).addClass("active").find(".sub li").addClass("active");
});

$("li.accordion > a").hover(
function(e) {
		$('li.accordion > a.on-hover').removeClass('on-hover');
    $(this).addClass('on-hover');
}, 
function(e){
	//$('li.accordion > a.on-hover').removeClass('on-hover');
});