JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="cat_icon">Menu</div>
<div id="categories">
  <div CLASS="panel_title">Inner Menu</div>
  <div CLASS="panel_item">
    <p>dsdszdSAD</p>
  </div>
</div>

CSS

#categories {
    display: none;
    width: 100%;
}

JavaScript

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