JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#" data-slide="1">Item 1</a></li>
    <li><a href="#" data-slide="2">Item 2</a></li>
    <li><a href="#" data-slide="3">Item 3</a></li>
    <li><a href="#" data-slide="4">Item 4</a></li>
</ul><!-- end #menu -->

<div class='clr'>

<ul class="submenu submenu-1">
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 1.4</a></li>
</ul><!-- end #submenu.submenu-item1 -->
<ul class="submenu submenu-2">
    <li><a href="#">Item 2.1</a></li>
    <li><a href="#">Item 2.2</a></li>
    <li><a href="#">Item 2.3</a></li>
    <li><a href="#">Item 2.4</a></li>
</ul><!-- end #submenu.submenu-item2 -->
<ul class="submenu submenu-3">
    <li><a href="#">Item 3.1</a></li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
    <li><a href="#">Item 3.4</a></li>
</ul><!-- end #submenu.submenu-item2 -->
<ul class="submenu submenu-4">
    <li><a href="#">Item 4.1</a></li>
    <li><a href="#">Item 4.2</a></li>
    <li><a href="#">Item 4.3</a></li>
    <li><a href="#">Item 4.4</a></li>
</ul><!-- end #submenu.submenu-item4 -->
    
<div class='clr'>    
    
<div class="hero hero-1">content 1</div>
<div class="hero hero-2">content 2</div>
<div class="hero hero-3">content 3</div>
<div class="hero hero-4">content 4</div>

CSS

li, .hero{float:left;margin:10px;}
.clr{clear:both}

JavaScript

$('#menu li a').click(function () {
    $('.submenu, .hero').hide();
    var id = $(this).data('slide');
    $('#menu li').removeClass('active');
    $('.submenu-'+id+', .hero-'+id).slideDown('normal');
});
$('.submenu, .hero').hide();