JSFiddle - React, Tailwind, and code Playground

by ExplosionPIlls

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){
    var $submenu = $(that).next('ul.submenu:first'),
        viz = $submenu.is(":visible");
        $('ul.submenu').slideUp();
    if (!viz) {
        $(that).next('ul.submenu:first').slideDown();
    }
    }