JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<ul id="menu">
    <li> <a href="javascript:void(0)" onclick="show_submenu(this)">TITLE 1</a>

        <ul class="submenu">
            <li> <a href="javascript:void(0)">sub1</a>

            </li>
            <li> <a href="javascript:void(0)">sub2</a>

            </li>
        </ul>
    </li>
    <li> <a href="javascript:void(0)" onclick="show_submenu(this)">TITLE 2</a>

        <ul class="submenu">
            <li> <a href="javascript:void(0)">sub1</a>

            </li>
            <li> <a href="javascript:void(0)">sub2</a>

            </li>
        </ul>
    </li>
    <li> <a href="javascript:void(0)">TITLE 3</a>

    </li>
    <li> <a href="javascript:void(0)">TITLE 4</a>

    </li>
</ul>

CSS

.submenu {
     display:none
 }

JavaScript

function show_submenu(that){
    $(that).next('ul.submenu:first').slideToggle();
}