JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul id="main_menu" class="clearfix">
        <li>
            <a href="#Home">Home</a>
        </li>
        <li>
            <a href="javascript:;">Products</a>
        </li>
        <li>
            <a href="#Gallery">Gallery</a>
        </li>
    </ul>
</div>

<div id="content">
    <div id="home">
        [H] [O] [M] [E]
    </div>
    
    <div id="gallery">
        [G] [A] [L] [L] [E] [R] [Y]
    </div>
</div>

CSS

#main_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#main_menu li {
    float: left;
    padding: 4px 10px;
    margin-right: 10px;
}

#main_menu li:nth-last-child(1) {
    margin-right: 0;
}

a {
    color: #444;
    text-decoration: none;
}

#main_menu .active {
    background: #ff9900;
}

#content {
    position: relative;
    display: block;
    margin-top: 20px;
}

#content > div {
    display: none;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

JavaScript

var load = false;

$("#main_menu li").on('click', function () {
    $(this)
        .toggleClass('active')
        .siblings()
        .removeClass('active');
    
    var anchor = $(this).find("a").attr("href");
    
    if (anchor == "#Home") {
        if (load == true) {
           $("div#home").slideToggle().siblings().slideUp();
        } else {
           $("div#home").slideDown().siblings().slideUp();
           load = true;
        }
    } else if (anchor == "#Gallery") {
        if (load == true) {
           $("div#gallery").slideToggle().siblings().slideUp();
        } else {
            $("div#gallery").slideDown().siblings().slideUp();
            load = true;
        }
    }
    
    return false;
});