JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion2">
    
<h3 class="btn-sub-main"><a>Banho</a><div class="seta-btn-sub"></div></h3>

    <div id="outraDiv">
        <ul>
            <li><a href="#">condicionadores</a><span></span>
            </li>
            <li><a href="#">sabonetes</a><span></span>
            </li>
            <li><a href="#">shampoos</a><span></span>
            </li>
            <li><a href="#">outros</a><span></span>
            </li>
        </ul>
    </div>
    
<h3 class="btn-sub-main"><a>Higiene Infantil</a><div class="seta-btn-sub"></div></h3>

    <div id="outraDiv">
        <ul>
            <li><a href="#">condicionadores</a><span></span>
            </li>
            <li><a href="#">sabonetes</a><span></span>
            </li>
        </ul>
    </div>
    
<h3 class="btn-sub-main"><a>Alimentação</a><div class="seta-btn-sub"></div></h3>

    <div id="outraDiv">
        <ul>
            <li><a href="#">condicionadores</a><span></span>
            </li>
            <li><a href="#">outros</a><span></span>
            </li>
        </ul>
    </div>
</div>

CSS

h3.ui-state-active {
    background-color: #ccf;
    background-image: none;
}

JavaScript

$(function () {
    $("#accordion2").accordion({
        collapsible: true
    });
    controlaOutraDiv("#accordion2");
});
controlaOutraDiv = function (selector) {
    $("#accordion2 h3", selector).bind('click', function () {
        console.log($(this).next().attr('aria-hidden'));
        if ($(this).next().attr('aria-hidden') == 'true') {
            $("#outraDiv ul li").show();
        } else if ($(this).next().attr('aria-hidden') == 'false') {
            $("#outraDiv ul li").hide();

        }
    });
}
$(function () {
    $("#accordion2").accordion({
        icons: null,
        beforeActivate: function (event, ui) {
            $("#" + ui.newHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
            $("#" + ui.oldHeader.attr("id")).children(".seta-btn-sub").toggleClass("active");
        },
        create: function (event, ui) {
            $("#" + ui.header.attr("id")).children(".seta-btn-sub").toggleClass("active");
        }
    });
});