JSFiddle - React, Tailwind, and code Playground

by Luke McLachlan

HTML

<p class="minimize">Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei. Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei.</p>

JavaScript

var minimized_elements = $('p.minimize');

minimized_elements.each(function () {
    var t = $(this).text();
    if (t.length < 325) return;

    $(this).html(
    t.slice(0, 325) + '<span>... </span><a href="#" class="more">more</a>' +
        '<span style="display:none;">' + t.slice(325, t.length) + ' <a href="#" class="less">less</a></span>');

});

$('a.more', minimized_elements).click(function (event) {
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().slideDown("slow");
});

$('a.less', minimized_elements).click(function (event) {
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();
});