JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="itemLink" id="a1">Item 1</a>
    <a href="#" class="itemLink" id="a2">Item 2</a>
    <a href="#" class="itemLink" id="a3">Item 3</a>


<section id="content">
    <h3>Content will be displayed below!</h3>

    <div id="activeContent"></div>
</section>

<section id="hiddenContainer" style="display:none;">
    <div id="item_1">
        Item 1 content<br><br>
        <a href="#" class="itemLink" id="a3">Item 4</a>
    </div>

    <div id="item_2">
        Item 2 content
    </div>

    <div id="item_3">
        Item 3 content
    </div>

    <div id="item_4">
        Item 4 content
    </div>
</section>

JavaScript

$('.itemLink').live('click', function () {
    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#item_" + id).html();

    $('#activeContent').fadeOut(600,function(){
        $('#activeContent').html(contentTobeLoaded).fadeIn(500, function () {
        //do whatever you want after fadeIn
        });
    });
    
    e.preventDefault();

});