JSFiddle - React, Tailwind, and code Playground

HTML

<div class="weekend-getaway1">Section 1
    <div class="destinations-list">
        <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan vestibulum velit ut iaculis. Suspendisse potenti. In pharetra vitae neque quis volutpat. Etiam mattis pellentesque enim, in molestie dui pretium non. Morbi tincidunt pharetra imperdiet. Maecenas at placerat arcu. Donec vitae condimentum orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Nunc vitae justo et felis gravida porta. Suspendisse porta consequat lacinia. Morbi eleifend vel odio et egestas. Duis aliquet felis est, quis aliquet elit venenatis sed. Praesent at dolor imperdiet, scelerisque turpis ac, convallis ipsum. Proin id tortor pellentesque nunc consectetur pellentesque at nec sem. Sed condimentum risus ut lacus tincidunt tempor. Quisque purus lectus, tincidunt eget sem at, tincidunt euismod sapien. Suspendisse potenti. Mauris vel laoreet nibh, eu convallis orci. Suspendisse in dolor a lectus varius vulputate. Aenean eleifend iaculis lectus nec pellentesque. Nullam malesuada mi quis aliquam commodo. Vestibulum sit amet mauris a ante sollicitudin consectetur nec a quam. </span>
    </div>
    
    <div>
      <a href="#" class="more-destination">More +</a>
      <a href="#" class="less-destination">Less +</a>
    </div>
</div>

CSS

.destinations-list{border:1px solid #000; height:100px; overflow:hidden;}
.less-destination {display:none; }

JavaScript

$(function() {
    $(".more-destination").click(function(e) {
        e.preventDefault();
        var clone = $(this).parent().prev("div.destinations-list").clone().appendTo('body').height('auto');
        var height = clone.height();
        clone.remove();
        
        $(this).parent().prev("div.destinations-list").animate({
            height: height
        }, 800, function() {});
        
        $(this).next(".less-destination").toggle();
        $(this).toggle();
    });

    $(".less-destination").click(function(e) {
        e.preventDefault();
        var clone = $(this).parent().prev("div.destinations-list").clone().appendTo('body').height('');
        var height = clone.height();
        clone.remove();
        
        $(this).parent().prev("div.destinations-list").animate({
            height: height
        }, 800, function() {});
        
        $(this).prev(".more-destination").toggle();
        $(this).toggle();
    });
});