JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<a href="#div1" class="navLink">Click here DIV1</a><br>
<a href="#div2" class="navLink">Click here DIV2</a><br>
<a href="#div3" class="navLink">Click here DIV3</a><br>
 
<div id="div1" class="page">
   <h1>Div1</h1>
   <p>Text</p>
</div>
 
<div id="div2" class="page">
   <h1>Div2</h1>
   <p>Text</p>
</div>
 
<div id="div3" class="page">
   <h1>Div3</h1>
   <p>Text</p>
</div>

CSS

.page {
    display: none;
}

JavaScript

$('.navLink').on('click', function(e){
    e.preventDefault();
    var targetDiv = $($(this).attr('href'));
    if(!targetDiv.is(':visible')){
        $('.page').slideUp();
        targetDiv.slideDown();
    }else{
        $('.page').slideUp();
    }
});