JSFiddle - React, Tailwind, and code Playground

by Pav KR

HTML

<div class="navigation">
    <a href="#div1" class="div-show">Div 1</a> |
    <a href="#div2" class="div-show">Div 2</a> |
    <a href="#div3" class="div-show">Div 3</a>
</div>
<div class="container">
  <div id="div1" class="hidden-content">
    Hello
  </div>
  <div id="div2" class="hidden-content">
    Hi
  </div>
  <div id="div3" class="hidden-content">
    Hola
  </div>
</div>

CSS

.navigation {background: #333; color: #fff; margin-bottom: 20px}
.navigation a {color: #fff}

.container {width: 300px; height: 300px; position: relative}
.container .hidden-content {width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; color: #fff}

#div1 {background-color: #800}
#div2 {background-color: #080}
#div3 {background-color: #008}

JavaScript

$(document).ready(function(){
    $('.navigation a').click(function(){
      var id = $(this).attr('href');
      $('.hidden-content').fadeOut(500);
      $(id).fadeIn(500);
      
      return false;
    });
});