JSFiddle - React, Tailwind, and code Playground

by slyunchenko

HTML

<ul>
    <li>
        <a href="#">Ноутбуки, планшеты и компьютеры</a>
        <div></div>
    </li>
    <li>
        <a href="#">Бытовая техника, интерьер</a>
        <div></div>
    </li>
    <li>
        <a href="#">Телефоны, MP3, GPS</a>
        <div></div>
    </li>
    <li>
        <a href="#">Игры, подарки, гаджеты</a>
        <div></div>
    </li>
    <li>
        <a href="#">Активный отдых и туризм</a>
        <div></div>
    </li>
</ul>

CSS

* {margin:0;padding:0;box-sizing:border-box}
ul {list-style:none}
ul li {position:relative;margin:0 auto 60px}
ul li div {position:absolute;top:100%;right:0;width:100%;height:50px;background:#ccc;display:none}

JavaScript

$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        var i = $(this);
        var currentBlock = i.closest('li').find('div');
        var otherBlocks = i.closest('ul').find('div');
        if (otherBlocks.is(':visible'))
            otherBlocks.fadeOut(250);
        if (!currentBlock.is(':visible'))
            currentBlock.fadeIn(250);
    });
});