JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cat_icon">Menu</div>
<div id="categories">
    <div CLASS="panel_title">Inner Menu</div>
    <div CLASS="panel_item">
        <template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx"
        />
    </div>
</div>

CSS

#categories {
    display: none;
    border : 1px solid #000;
    width: 200px;
}

JavaScript

$('#cat_icon,.panel_title').click(function () {
    if($('#cat_icon').is(':visible')){
    $('#cat_icon').fadeOut(function () {
        $('#categories').toggle('slide', {
            direction: 'left'
        }, 1000);
    });
    }
    else{
        $('#categories').toggle('slide', {
            direction: 'left'
        }, 1000, function(){ $('#cat_icon').fadeIn();});
    }
});