JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<p class="addReadMore showlesscontent">Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die</p>

<p class="addReadMore showlesscontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique eget eros nec dignissim. Proin egestas id augue a efficitur. Suspendisse tempor commodo mauris quis rutrum. Nulla a odio id est dignissim vehicula. Morbi eu ipsum sem. Mauris faucibus aliquet pretium. Donec ac arcu risus. Nulla vulputate in mauris sed sodales. Morbi convallis purus vitae orci dapibus tincidunt. Mauris placerat ac lorem ut dictum. Integer rutrum sapien quam. Pellentesque porttitor mauris in massa maximus, nec ornare neque tincidunt. Nam sodales tempus nisi, vehicula hendrerit leo.

Nam egestas justo nec dignissim faucibus. Ut commodo quam eget massa rutrum, in aliquet quam scelerisque. Mauris mollis enim ac luctus congue. In hac habitasse platea dictumst. Suspendisse diam sapien, mattis id molestie sit amet, gravida vel orci. Maecenas eu mi a ligula volutpat cursus ac nec lorem. Nam libero sem, mollis id interdum ac, porta vel nulla. Nulla tincidunt...

CSS

.addReadMore.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
        display: none;
    }

    .addReadMore.showmorecontent .readMore {
        display: none;
    }

    .addReadMore .readMore,
    .addReadMore .readLess {
        font-weight: bold;
        margin-left: 2px;
        color: blue;
        cursor: pointer;
    }

    .addReadMoreWrapTxt.showmorecontent .SecSec,
    .addReadMoreWrapTxt.showmorecontent .readLess {
        display: block;
    }

JavaScript

function AddReadMore() {
    //This limit you can set after how much characters you want to show Read More.
    var carLmt = 15;
    // Text to show when text is collapsed
    var readMoreTxt = " ... Read More";
    // Text to show when text is expanded
    var readLessTxt = " Read Less";


    //Traverse all selectors with this class and manupulate HTML part to show Read More
    $(".addReadMore").each(function() {
        if ($(this).find(".firstSec").length)
            return;

        var allstr = $(this).text();
        if (allstr.length > carLmt) {
            var firstSet = allstr.substring(0, carLmt);
            var secdHalf = allstr.substring(carLmt, allstr.length);
            var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore'  title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
            $(this).html(strtoadd);
        }

    });
    //Read More and Read Less Click Event binding
    $(document).on("click", ".readMore,.readLess", function() {
        $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
    });
}
$(function() {
    //Calling function after Page Load
    AddReadMore();
});