JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#div1" class="navLink">div1</a><br>
<a href="#div2" class="navLink">div2</a><br>
<a href="#div3" class="navLink">div3</a><br>
 
<div id="div1" class="page">id01, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text</div>
<div id="div2" class="page">id02, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text</div>
<div id="div3" class="page">id03, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text</div>
some

CSS

.page {
    display: none;
}

JavaScript

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