JSFiddle - React, Tailwind, and code Playground

by Nikita Polevoy

HTML

<ul class="sec">
  <li><a href="" data-link="cat1">1</a></li>
  <li><a href="" data-link="cat2">2</a></li>
</ul>
<ul class="third" data-menu="cat1">
  <li><a href="">1111111111111111</a></li>
  <li><a href="">11111 штука</a></li>
  <li><a href="">111 11 11</a></li>
</ul>
<ul class="third" data-menu="cat2">
  <li><a href="">222</a></li>
  <li><a href="">22222 22</a></li>
  <li><a href="">22 22 22</a></li>
  <li><a href="">22 штука</a></li>
</ul>

JavaScript

$(function() {
  $('.third').fadeOut();

  subMenu();
  
  function subMenu() {
    var link = $(".sec>li>a");
    var flag = false;
    var activeMenu;

    link.click(function(e) {
        e.preventDefault();

        activeMenu = $('.third[data-menu="' + $(this).data('link') + '"]');

        $('.third').fadeOut(500, function() {
          activeMenu.fadeIn(500);
        })
    });
  }
});