JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
	<div class="menu01">
		<ul id="menu-main-menu" class="menu">
			<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-5"><a href="/home"><i class="icon-off"></i> THE BLOG</a></li>
			<li id="menu-item-7" class="sub menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="#"><i class="icon-desktop"></i> MISC</a>
				<ul class="sub-menu">
					<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="/formatting"><i class="icon-camera-retro"></i> FORMATTING</a></li>
					<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="/archive"><i class="icon-calendar"></i>ARCHIVE</a></li>
					<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="/404"><i class="icon-remove-sign"></i>404 PAGE</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

JavaScript

jQuery(document).ready(function ($) {
    jQuery('.menu ul').slideUp(0);

    jQuery('.menu li.sub').click(function () {
        var target = jQuery(this).children('a');
        if(target.hasClass('menu-expanded')){
            target.removeClass('menu-expanded');
        }else{
            jQuery('.menu-item > a').removeClass('menu-expanded');
            target.addClass('menu-expanded');
        }
        jQuery(this).find('ul:first')
            .slideToggle(350)
            .end()
            .siblings('li')
            .find('ul')
            .slideUp(350);
        return false;
    });
});