read more read less jquery – How to Create Read More Read Less Content Using jQuery?

read more read less jquery: Use the JavaScript substring() method. Custom Read More and Read Less using jQuery/ Javascript Function. in this example Using jQuery Read More/Less Content Toggle.

How to Create Read More Read Less Content Using jQuery

read more read less jquery feature adds a read more link after longer texts trimming to 3-4 lines.

1. Create an HTML Div with Some Texts
2. Create Read More or Read Less Using jQuery

Use the JavaScript substring() method

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom Read More Read Less Using jQuery - - Demo :: www.pakainfo.com</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
    function showMoreDetails() {

        var carLmt = 50;

        var readMoreTxt = " ... Read More";

        var readLessTxt = " Read Less";


        $(".showMoreDetails").each(function() {
            if ($(this).find(".firstSec").length)
                return;

            var userContent = $(this).text();
            if (userContent.length > carLmt) {
                var firstSet = userContent.substring(0, carLmt);
                var secdHalf = userContent.substring(carLmt, userContent.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);
            }

        });

        $(document).on("click", ".readMore,.readLess", function() {
            $(this).closest(".showMoreDetails").toggleClass("showlesscontent displayallinformation");
        });
    }
    $(function() {
        showMoreDetails();
    });
    </script>
    <style>
    .showMoreDetails.showlesscontent .SecSec,
    .showMoreDetails.showlesscontent .readLess {
        display: none;
    }

    .showMoreDetails.displayallinformation .readMore {
        display: none;
    }

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

    .showMoreDetailsWrapTxt.displayallinformation .SecSec,
    .showMoreDetailsWrapTxt.displayallinformation .readLess {
        display: block;
    }
    </style>
</head>

<body>
    <h3>Show More Content</h3>
    <p class="showMoreDetails showlesscontent">Pakainfo website focuses on all web language and framework tutorial PHP, Laravel, Codeigniter, Nodejs, API, MySQL, AJAX, jQuery, JavaScript, Demo. It's helps build websites using PHP, specializes in building eCommerce shopping cart and provides PHP freelancer for hire.Learn Web Development, PHP, MySQL, JavaScript, jQuery, Ajax, WordPress, Drupal, CodeIgniter, CakePHP with Pakainfo tutorials.It is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.pakainfo is online web development portal for step by step tutorials on bootstrap, php, sql, jquery, angularjs and many more.
</p>
</body>

</html>

Don’t Miss : jQuery Read More/Less Toggle

Free Live Chat for Any Issue

I hope you get an idea about read more read less jquery.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.