JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div id="top" class="hide">
    <a href="#middle" data-target="#middle">middle page</a>
    <a href="#bottom" data-target="#bottom">bottom page</a>
</div>
<div id="middle">
    <a href="#top" data-target="#top">top page</a>
    <a href="#bottom" data-target="#bottom">bottom page</a> 
</div>
<div id="bottom" class="hide">
    <a href="#middle" data-target="#middle">middle page</a>
    <a href="#top" data-target="#top">top page</a> 
</div>

CSS

.hide {
    display:none;
}
#top, #middle, #bottom {
    height:300px;
}
#top {
    background:green
}
#bottom {
    background:blue
}
#middle {
    background:red;
}

JavaScript

$("a").click(function () {
    $("div").addClass("hide");
    $($(this).data("target")).removeClass("hide");
})