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;}

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");
});