How to hide/show more text within a certain length using JQuery.

Description:

In this example we explain that how to truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest content with more/less link using jQuery or JavaScript. Or show only first 100 characters and rest of hide in jQuery. Or only display # words and hide the rest with option to toggle more using jQuery. Or how to hide/show more text within a certain length using jQuery. Or truncate text in html with link to show more /less. Or how to create more link button to display rest of the text using jQuery.

Code:

<p class="moreless">Hi guys "aspsolutionkirit" Provide a Total or full Solution of Asp.Net Programming in which we provide most of the program of the Asp.Net, C#, Ajax, Jquery, MVC ....</p>

jQuery(function(){

    var morelessd_elements = $('p.moreless');

   

    morelessd_elements.each(function(){   

        var t = $(this).text();       

        if(t.length < 100) return;

       

        $(this).html(

            t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+

            '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Less</a></span>'

        );

       

    });

   

    $('a.more', morelessd_elements).click(function(event){

        event.preventDefault();

        $(this).hide().prev().hide();

        $(this).next().show();       

    });

   

    $('a.less', morelessd_elements).click(function(event){

        event.preventDefault();

        $(this).parent().hide().prev().show().prev().show();   

    });

});