JSFiddle - React, Tailwind, and code Playground

HTML

<a class="msg-link" data-id="MessageA" href="#">Message A</a>

<a class="msg-link" data-id="MessageB" href="#">Message B</a>

<a class="msg-link" data-id="MessageC" href="#">Message C</a>

<div id="textMessages">
    
    <div id="defaultMessage">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    
    <div class="hidden" id="MessageA">
        Optional A. Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    
    <div class="hidden" id="MessageB">
        Optional B. Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    
    <div class="hidden" id="MessageC">
        Optional C. Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    
</div>

CSS

#textMessages{
 display:none;   
}
a.msg-link{ display:block; }

.hidden{
 display: none;   
}

JavaScript

$(document).ready(function(){
    
    $(".msg-link").hover(
        function(){
            var id = $(this).data("id");
            if(id!==undefined){
             $("#" + id).show();   
            }
            $("#textMessages").show();
            
        },function(){
            $("#textMessages").hide();
            $(".hidden").hide();
            
            
        });
});


function ShowHide() {
    alert('here');
    $("#textMessages").animate({
        "height": "toggle"
    }, {
        duration: 1000
    });
}