JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<ul class="open-close1" id="reportType">
    <li class="active"> 
           <div id="subcats">
                <ul>
                    <li>
                        <a class="opener" href="#">Item1</a>
                        <div class="subnav1 hidden">
                            <ul>
                                <li>Item1-1</li>
                                <li>Item1-2</li>
                                <li>Item1-3</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a class="opener" href="#">Item2</a>
                        <div class="subnav1 hidden">
                            <ul>
                                <li>Item2-1</li>
                                <li>Item2-2</li>
                                <li>Item2-3</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a class="opener" href="#">Item3</a>
                        <div class="subnav1 hidden">
                            <ul>
                                <li>Item3-1</li>
                                <li>Item3-2</li>
                                <li>Item3-3</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
</li>
</ul>

JavaScript

$(".opener").hover(function (){
    $(this).next().toggle();               
});