JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="clickme">one</a>
<div class="showme" id="hidden_one">Hiya!</div>

<a href="#" class="clickme">two</a>
<div class="showme" id="hidden_two">Helleuuuu!</div>

<a href="#" class="clickme">three</a>
<div class="showme" id="hidden_three">Hey there!</div>

<a href="#" class="clickme">four</a>
<div class="showme" id="hidden_four">Hi!</div>

CSS

div.showme { 
 display:none;   
}

a { 
 display:block;   
}

JavaScript

$(document).ready(function(){
    $('a.clickme').on('click', function(e){
       $('div.active').removeClass('active').fadeOut();
       $(this).next('.showme').addClass('active').fadeIn(); 
       e.stopPropagation();
    });
});

 $('html').click(function() {
      $('div.active').removeClass('active').fadeOut();
    });