If you are creating web-application, some points we cannot show complete text of a value inside table or a div, at that point we can create a jQuery & Javascript based function to show some text and hide the exceeded text, by adding "Show more" button, and on clicking "Show more", we can show the hidden text. Basically we will create a function to expand/collapse text.

You can use the JavaScript substring() method in combination with the jQuery append() and html() method to cretae expand/ collapse link at the end of paragraphs  or div  if the number of characters inside a paragraph/div exceeds a certain length.

Let's try to create one using the above procedure:

  1. You would have to create a class to hide the extended text, so add a class .showMore with display:none property
    .morecontent span {
        display: none;
    }
    .ReadMore {
        display: visible;
    }
  2. Now you need to create the Javascrip/jQuery based function as shown below
    $(document).ready(function(){
            //length in characters
        var maxLength = 200;
        var ellipsestext = "...";
        var moretext = "Read more";
        var lesstext = "Read less";
        $(".showReadMore").each(function(){
            //get the text of paragraph or div
            var myStr = $(this).text();
            
           // check if it exceeds the maxLength limit
            if($.trim(myStr).length > maxLength){
                //get only limited string firts to show text on page load
                var newStr = myStr.substring(0, maxLength);
    
                //get remaining string         
     var removedStr = myStr.substr(maxLength, $.trim(myStr).length - maxLength);
                // now append the newStr + "..."+ hidden remaining string
                var Newhtml = newStr + '<span class="moreellipses">' + ellipsestext+ '</span><span class="morecontent"><span>' + removedStr + '</span>&nbsp;&nbsp;<a href="javascript:void(0)" class="ReadMore">' + moretext + '</a></span>';
     
                $(this).html(Newhtml);
                
            }
        });
        
        //function to show/hide remaining text on ReadMore button click
        $(".ReadMore").click(function(){
           
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            }
             else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });


  3. Create HTML text to test the string
     <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <p class="showReadMore">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>?

Now we have all the code, if you will execute this in browser, you should see output like below

read-more-less-using-jquery-javascript-min.gif

Here is the complete code

<style type="text/css">
  
  .morecontent span {
    display: none;
}
.ReadMore {
    display: visible;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        //length in characters
    var maxLength = 200;
    var ellipsestext = "...";
    var moretext = "Read more";
    var lesstext = "Read less";
    $(".showReadMore").each(function(){
        //get the text of paragraph or div
        var myStr = $(this).text();
        
       // check if it exceeds the maxLength limit
        if($.trim(myStr).length > maxLength){
            //get only limited string firts to show text on page load
            var newStr = myStr.substring(0, maxLength);

            //get remaining string         
 var removedStr = myStr.substr(maxLength, $.trim(myStr).length - maxLength);
            // now append the newStr + "..."+ hidden remaining string
            var Newhtml = newStr + '<span class="moreellipses">' + ellipsestext+ '</span><span class="morecontent"><span>' + removedStr + '</span>&nbsp;&nbsp;<a href="javascript:void(0)" class="ReadMore">' + moretext + '</a></span>';
 
            $(this).html(Newhtml);
            
        }
    });
    
    //function to show/hide remaining text on ReadMore button click
    $(".ReadMore").click(function(){
       
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        }
         else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
</script>

</head>
<body>    
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="showReadMore">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>

Codepen working sample:

You may also like to read:

Custom Checkbox and Custom Radio buttons in HTML / CSS

How to make image rotate in 360 degrees in HTML using jQuery / Javascript

Social media icons hover effect (CSS Based)