JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class="sidebar">
<a href="#category" class="tt open" title="Категории"><span class="category"></span> ссылка</a>
  </div>
<div id="category"></div>
<div id="zindex"></div>

CSS

* {margin:0;padding:0;}
.tt {
    background:red;
}
span.category {
    background:blue;
    display:inline-block;
    width:20px;
    height:11px;
}
#category {
    background:green;
    height:100px;
    width:300px;
    display:none;
}
#zindex {
    z-index:2;
}

JavaScript

$('a.tt').click(function(){
    $('#category').show();
    $('#zindex').css('z-index','3');
    $('a.tt').toggleClass('open close');
});
$(':not(#anything)').click(function (e) {
    if (!$(e.target).closest('.tt.close').length && !$(e.target).closest('#category').length){
        $('#category').hide();
        $('#zindex').css('z-index','2');
        $('a.tt').removeClass('close').addClass('open');
    }
});