JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article expand_collapse">
    <h3>Loremitis!</h3>
    <p>Zu viel Text!<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, <b>nunc eget laoreet sagittis</b>,
    quam <em>ligula sodales orci, congue imperdiet</em> eros tortor ac lectus.</p>
    <p>Duis <i>eget nisl orci.<br/> Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius <span>egestas vestibulum</span>.
    Nullam a </i>dolor arcu, ac tempor elit. Donec.</p>
</div>
<div class="article expand_collapse">
    <p>Absatz passt ...</p>
</div>
<div class="article expand_collapse_2">
    <h3>Loremitis!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, <b>nunc eget laoreet sagittis</b>,
    quam <em>ligula sodales orci, congue imperdiet</em> eros tortor ac lectus.</p>
    <p>Duis <i>eget nisl orci.<br/> Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius <span>egestas vestibulum</span>.
    Nullam a </i>dolor arcu, ac tempor elit. Donec.</p>
</div>

CSS

body {
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
}

a {
    color: #0254EB
}

a:visited {
    color: #0254EB
}

.article {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
    padding:5px;
}

.collapsed {
	transition: max-height 0.3s;
	overflow:hidden;
	max-height:90px;
}

.expanded {
	transition: max-height 1s;
	overflow:hidden;
	max-height:1000px;
}

a.morelink,
a.lesslink {
    text-decoration:none;
    outline: none;
}

.hidden {
	display:none;
}

JavaScript

/**
 * jQuery Plugin (c) 2014 by NaN
 * License: GPL
 */
(function($) {

    $.fn.expandCollapse = function(options) {
    
        var options = $.extend({
                ellipsisText: '...',
                moreText: 'more',
                lessText: 'less'
            }, options);
        
        return this.each(function(){
        
            var $this        = $(this),
                $wrapper     = $('<div class="collapsed" />');
            
            if($this.outerHeight(true) > parseInt($wrapper.css('max-height'), 10)) {
            
                var $wrapper  = $this.wrapInner($wrapper).children('.collapsed').eq(0),
                    $ellipsis = $this.append('<span class="ellipsis">' + options.ellipsisText + '</span>')
                        .children('span.ellipsis').eq(0);
                
                $this.append('<a href="#" class="morelink">' + options.moreText + '</a>')
                    .children('a.morelink').eq(0)
                    .click(function(){
                    
                        var $this = $(this);
                        
                        if($this.hasClass('morelink')) {
                        
                            var $data = $this.removeClass('morelink')
                                    .addClass('lesslink')
                                    .html(options.lessText)
                                    .data();
                                    
                            $data.wrapper.removeClass('collapsed').addClass('expanded');
                            $data.ellipsis.addClass('hidden');
                            
                        } else {
                        
                            var $data = $this.removeClass('lesslink')
                                    .addClass('morelink')
                                    .html(options.moreText)
                                    .data();
                                    
                           ...