JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="nav">
    <ul id="menu">
        <li id="link1"><a href="#" data-page="page1">Topic One</a>
         <div id="page1" class="content">
         <h1>Show Page1</h1>
        </div>
        </li>
        <li id="link2"><a href="#" data-page="page2">Topic Two</a>
        <div id="page2" class="content">
        <h1>Show Page2</h1>
    </div>
        </li>
        <li id="link3"><a href="#" data-page="page3">Topic Three</a>
         <div id="page3" class="content">
         <h1>Show Page3</h1>
         </div>
        </li>
    </ul>
</div>

CSS

.content { display:none;}

JavaScript

$(function() {
    var curPage="";
    $("#menu a").click(function() {
        var page = $(this).attr("data-page");
        if($("#"+page).css("display") != "none"){  
            $("#"+page).slideUp();
        }else{
            $(".content").slideUp();    
            $("#"+page).slideToggle();
        }
    });
});