JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info2">

<p class="moreinfo" id="info1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a elit mi. Praesent a metus lorem. Cras eget arcu ut purus varius aliquam. Suspendisse in ante sem. Donec faucibus mi non commodo consequat. Ut consectetur massa tortor, eget pellentesque velit dapibus vitae. Phasellus a urna vel urna condimentum fringilla ultricies vitae nulla. Integer in lacus sit amet enim rhoncus interdum. Nam gravida consequat tristique. Nunc elementum venenatis sapien, sed dictum magna hendrerit eget.</p>

<a class="more" target="1">Show Info (+)</a>

</div> <!-- info2 -->

CSS

#info, #info2 {
 background: #00a8c3;
 /*display: none;*/
 float: left;

 left: 2%;
 margin: 0 0 20px 0;
 opacity: 0.9;
 padding: 15px;
 position: absolute;
 /*width: 570px;*/
 width: 300px;
 z-index: 400;
}

#info2 {
 background: #00a8c4;
 display: block;
}

JavaScript

$('.moreinfo').hide();

$('.more').click(function (ev) {
    var t = ev.target
    
    $('#info' + $(this).attr('target')).slideToggle(500, function() {
        
        //$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')
        if($(t).html() == 'Show Info (+)') {
            console.log(ev.target);
            $('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).html('Hide Info (x)');
        } else {
            $('#info2').animate({width: 300, height: 20, marginLeft: 0}, {duration: 2000}, "linear");
            $(t).html('Show Info (+)');
        }
        
    });

});



return false;