JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divHiddenContainer" style="display:none;">
          <div id="divItem1"><span style="background-color:Gray;">God, My description about item 1 goes here</span></div>
          <div id="divItem2"><span style="background-color:yellow;">Brother,My description about item 222 goes here</span></div>
          <div id="divItem3"><span style="background-color:orange;">Hello,My description about item 333 goes here</span></div>
        </div>
        
        <a href="#" class="aItemLnk" id="a1">Item 1</a>
       <a href="#" class="aItemLnk" id="a2">Item 1</a>
       <a href="#" class="aItemLnk" id="a3">Item 1</a>

       <h3>Content goes here</h3>
        <div id="ajax">       
        
        
        </div>

JavaScript

$(".aItemLnk").click(function () {

        var id = $(this).attr("id").replace(/^.(\s+)?/, "");
        var contentTobeLoaded = $("#divItem" + id).html();          
     $('#ajax').fadeOut(600,function(){
        $('#ajax').html(contentTobeLoaded).fadeIn(500, function () {
          //do whatever you want after fadeIn
        });
     });
    });