JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<div class='previewable'>
    <div class='previewable-content'>
        <p>Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.</p>
        <p>Quare talis improborum consensio non modo excusatione amicitiae tegenda non est sed potius supplicio omni vindicanda est, ut ne quis concessum putet amicum vel bellum patriae inferentem sequi; quod quidem, ut res ire coepit, haud scio an aliquando futurum sit. Mihi autem non minori curae est, qualis res publica post mortem meam futura, quam qualis hodie sit.</p>
        <p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.</p>
        <p>Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, quicquam habiturum spei fuisse, nisi alicuius intolerabili libidine et nimis acerbo odio niteretur. Sed ego Atratino, humanissimo atque optimo adulescenti meo necessario, ignosco, qui habet excusationem vel pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, si iussus est, necessitati, si speravit aliquid, pueritiae. Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum. Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.</p>
        <p>Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens...

CSS

.previewable {
   
    position:relative;
    max-height:200px;
}
.previewable.previewable-reduced {
    overflow:hidden;
}
.previewable.previewable-expanded {
    max-height:inherit;
}
.previewable-overlay {
}
.previewable.previewable-expanded .previewable-overlay {
    display:none
}
.previewable.previewable-reduced .previewable-overlay {
    position:absolute;
    bottom:0px;
    width:100%;
    height:80px;
    background:linear-gradient(rgba(0, 0, 0, 0), white, white);
   -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#FFFFFF')"

}
.previewable-fullyvisible .previewable-actions {
    display:none
}
.previewable-reduced .previewable-actions {
    position:absolute;
    bottom:0px;
}
.previewable-reduced .previewable-actions-reduce{
display:none;
}
.previewable-expanded .previewable-actions-expand{

display:none;
}

JavaScript

(function ($) {
    var methods = {
        init: function (options) {
            var opts = $.extend({}, $.fn.previewable.defaults, options);
            this.each(function () {
                var $this = $(this);
                var $content = $this.find(opts.content);
                $this.data("previewable", opts);
               
                
                if ($content.outerHeight() > $this.outerHeight()) {
                    var $expandAction = $this.find(opts.expandAction);
                    var $reduceAction = $this.find(opts.reduceAction);

                    if (!$this.hasClass(opts.reducedClass) && !$this.hasClass(opts.expandedClass)) {
                        $this.addClass(opts.reducedClass);
                    }

                    $expandAction.click(function (evt) {
                       
                        $this.addClass(opts.expandedClass).removeClass(opts.reducedClass);
                        evt.preventDefault();
                    });
                    $reduceAction.click(function (evt) {
                       
                        $this.addClass(opts.reducedClass).removeClass(opts.expandedClass);
                        evt.preventDefault();
                    });
                } else { 
                    $this.addClass(opts.fullyVisibleClass);
                }
            });
            return this;
        },
        reduce: function () {
            var opts = this.data("previewable");
            var expanded = this.find("." + opts.expandedClass).andSelf();

            return unfolded;
        },
        expand: function () {
            var opts = this.data("previewable");
            var reduced = this.find("." + opts.reducedClass).andSelf();

            return folded;
        }
    };

    $.fn.previewable = function (methodOrOptions) {
        if (methods[methodOrOptions]) {
            return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof...