JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#" data-div="div1">Show Div1</a></li>
        <li><a href="#" data-div="div2">Show Div2</a></li>
        <li><a href="#" data-div="div3">Show Div3</a></li>
        <li><a href="#" data-div="div4">Show Div4</a></li>
        <li><a href="#" data-div="div5" data-div="div1">Show Div5</a></li>
    </ul>
</nav>

<div id="contentArea">
    <div class="contentDiv" id="div1">This is div1</div>
    <div class="contentDiv" id="div2">This is div2</div>
    <div class="contentDiv" id="div3">This is div3</div>
    <div class="contentDiv" id="div4">This is div4</div>
    <div class="contentDiv" id="div5">This is div5</div>
</div>

CSS

.contentDiv {
    display: none;
}

JavaScript

$(function() {
    $("nav a").click(function() {
        var e = $(this);
        var target = $("#" + e.data("div"));
        target.show("slow").siblings().hide("slow");
    });

});