JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a class="search-charts-go">go</a>
    </li>
</ul>

<div class="search-container-wrap"> show this</div>

CSS

li{list-style:none;}
.search-charts-go {
    background: url("../../img/charts/main-chart-tabs-sprite.png") no-repeat 17px -512px;
    padding: 30px 30px 30px 30px;
    background-color: #525252;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-right: 16px !important;
}
a.search-charts-btn:hover {
    background-color: #656565 !important;
}

.search-container-wrap{
    width: 400px;
    position: absolute;
    top: 0px;
    left: 106px;
    border: 1px solid blue;
    background-color: white;
    height: 63px;
    display:none;
    z-indez:9999;
}

JavaScript

/*	SHOWS CHART SEARCH
	===================================================================*/
$(function(){
    $('.search-charts-go').click(function (e) {
    e.stopPropagation();
    if($('.search-container-wrap').hasClass('visible')) {
        $('.search-container-wrap').stop().hide('slide', {direction: 'left'}, 500).removeClass('visible');
    } else {
        $('.search-container-wrap').stop().show('slide', {direction: 'left'}, 500).addClass('visible');
    }
   });
});