JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<ul id="menubar">
        <li id="menu1" class="menu">
            <a href="#" onclick="func()" >Menu 1</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 1</a></li>
            </ul>
        </li>
        <li id="menu2" class="menu">
            <a href="#" onclick="funct()">Menu 2</a>
            <ul class="submenubar">
                <li class="submenu"><a href="#">Submenu 2</a></li>
            </ul>
        </li>
</ul>
<script>
    $(document).ready(function(){
            $('li.submenu').hide()
            $('li.menu').click(function(e){
                $(this).find('li.submenu', this).slideToggle('fast'); 
                e.stopPropagation();
            })
        })
   function func(){
            $("#menu2").toggle();        
    }
   function funct(){
            $("#menu1").toggle();        
    } 
</script>