JSFiddle - React, Tailwind, and code Playground

by Cayce Balara

HTML

<body>
    <div class="cont2">
        <ul id="nav">
            <li data-target="#about"><a href="#">About</a>
            </li>
            <li data-target="#resume"><a href="#">Resume</a>
            </li>
            <li data-target="#portfolio"><a href="#">Portfolio</a>
            </li>
            <li data-target="#contact"><a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <div class="output">
        <div id="about">
            <p>About</p>
        </div>
        <div id="resume">
            <p>Resume</p>
        </div>
        <div id="portfolio">
            <p>Portfolio</p>
        </div>
        <div id="contact">
            <p>Contact</p>
        </div>
    </div>
</body>

CSS

div.output div {
    display: none;
    width: 100px;
    padding: 5px;
    background-color: lightblue;
}
div.output div.active {
    display: block;
}
ul#nav li.active a {
    color: red;
}

JavaScript

$(document).ready(function () {

    // bind this function to all links in the nav <ul> element
    $("ul#nav li a").on("click", function (e) {

        // don't do the normal thing you do when a link is clicked
        e.preventDefault();

        // get a reference to the enclosing <li> element
        var li = $(this).closest("li");

        // retrieve the "target" data from the <li> element, which identifies the id selector of the div to be shown
        var target = li.data("target");
        
        // add the active class to the current link and remove it from the others
        li.addClass("active").siblings().removeClass("active");
        
        // show the target div with a slideDown and hide the otehrs with a slideUp
        $(target).slideDown("slow").siblings().slideUp("slow");

    });
});