JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<a href="#" class="show-more">Show more</a>
<a href="#" class="show-less">Show less</a>

JavaScript

$('.user-profile .resume p').each(function() {
    var $obj = $(this);
    var height = $obj.height();
    var maxHeight = 40;

    if (height > 40) {
        $obj.css('height', maxHeight).css('overflow', 'hidden');
        $obj.siblings('.show-more').show();
    }

    $obj.siblings('.show-more').click(function(e) {
        e.preventDefault();
        $obj.css({
            'height' : 'auto',
            'overflow' : 'visible'
        });
        $obj.siblings('.show-more').hide();
            $('.show-less').fadeOut();
            $obj.siblings('.show-less').show();
        });

     $obj.siblings('.show-less').click(function(e) {
         $('.show-more').fadeOut();
        e.preventDefault();
        $obj.css({
            'height' : maxHeight,
            'overflow' : 'hidden'
        });
            $obj.siblings('.show-more').show();
            $obj.siblings('.show-less').hide();
      });

});