JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content_wrapper" style="width:30%; background:red">
<section id="menu">
    <div id="menu_nav">
        <ul class="menu_top">
            <li id="menu_starters" class="menu">STARTERS</li>
            <li id="menu_mains" class="menu">MAINS</li>
            <li id="menu_noodles" class="menu">NOODLES &amp RICE</li>
        </ul>
        <ul id="start_nav" class="menu_sub">
            <li id="st_meat" class="s_menu">MEAT &amp FISH</li>
            <li id="st_veg" class="s_menu">VEGETARIAN</li>
        </ul>
    </div>
    <article id="st_meat_list" class="menu_list">
        <p>Meat</p>
    </article>
    <article id="st_veg_list" class="menu_list">
        <p>Vege</p>
    </article>

JavaScript

$(window).click(function() {
		$("#content_wrapper").slideToggle(400);
});

   
   $('.s_menu, .m_menu').click(function(){
    var menuid = event.target.id;
    var mlist = ('#') + (menuid) + ('_list');
    var last = $('.menu_list').not(mlist);


        $(last).slideUp(400, function (){
            $(mlist).slideToggle(400);
        });


        return(false);
				event.stopPropagation();
  });