JSFiddle - React, Tailwind, and code Playground

by hollandben

HTML

<div class="expand">
    <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
    <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
</div>
<span class="expand-trigger">Expand</span>

CSS

.expand {
    height: 50px;
    overflow: hidden;
}

.expanded {
    height: auto;
}

JavaScript

$('.expand-trigger').click(function() {
        var $text = $(this).prev('.expand');
        var contentHeight = $text.addClass('expanded').outerHeight();
    
        $text.removeClass('expanded').animate({ 
            height: contentHeight
        }, 500);
    
        $(this).remove();
});