JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cmn"><div><span></span></div>Here
    <div class="toShow" style="display: none;">
            <div class="toshowinnr clr">
                <a class="sclnk" href="#">1</a>
                <a class="sclnk" href="#">2</a>
                <a class="sclnk" href="#">3</a>
                <a class="sclnk" href="#">4</a>
                <a class="sclnk" href="#">5</a>
            </div>
        </div>
    <div class="toShow" style="display: none;">
            <div class="toshowinnr clr">
                <a class="sclnk" href="#">6</a>
                <a class="sclnk" href="#">7</a>
                <a class="sclnk" href="#">8</a>
                <a class="sclnk" href="#">9</a>
                <a class="sclnk" href="#">10</a>
            </div>
        </div>
</div>

CSS

.cmn{
  color:red;
}

JavaScript

jQuery('div.cmn').click(function() {
  jQuery(this).children('div.toShow').first().stop().slideDown();
}).mouseleave(function() {
  jQuery(this).children('div.toShow').first().stop().slideUp();
});