Adding "Show Less" "Show More" feature using jQuery

Requirement:

1. You have a list of dynamically generated p tags on your page and the length of the contents varies abnormally.
2. You want to normalize the length of the content of the p tags to a threshold value of 350 characters.
3. For all the p tags having length greater than 350, the remaining content should be hidden and there should be a link saying ‘… more’.
4. There should be a tolerance limit of 20 characters i.e. if the p tags having length equal to 370 (350 + 20) characters, it should be left as it is.

Method body:

  function SetMoreLess(para, thrLength, tolerance, moreText, lessText) {
            var alltext = $(para).html().trim();

            if (alltext.length + tolerance < thrLength) {
                return;
            }
            else {
                var firstHalf = alltext.substring(0, thrLength);
                var secondHalf = alltext.substring(thrLength, alltext.length);

                var firstHalfSpan = '' + firstHalf + '';
                var secondHalfSpan = '' + secondHalf + '';
                var moreTextA = '' + moreText + '';
                var lessTextA = '' + lessText + '';

                var newHtml = firstHalfSpan + moreTextA + secondHalfSpan + lessTextA;

                $(para).html(newHtml);
            }
        }

Step 1: add class “summary” to the p tag(s) Step 2: Iterate over all p tags and call the above function SetMoreLess like this.

  SetMoreLess($(this).find("p.summary"), 350, 20, " ... more", " ... less");

Step 3: bind ShowMore and ShowLess click events ( in page_load or $(document).ready())

   
            $("a.moreText").click(function () {
                $(this).hide();
                var pTag = $(this).parents("p.summary");

                $(pTag).find("a.lessText").show();
                $(pTag).find("span.secondHalf").show();
            });

            $("a.lessText").click(function () {
                $(this).hide();
                var pTag = $(this).parents("p.summary");

                $(pTag).find("a.moreText").show();
                $(pTag).find("span.secondHalf").hide();
            });

Step 4: add css styles used in the code

      
        a.moreText
        {
            color: blue;
            cursor: pointer;
            padding-left: 5px;
            padding-right: 10px;
        }
        
        a.lessText
        {
            cursor: pointer;
            color: blue;
            display: none;
            padding-left: 5px;
            padding-right: 10px;
        }
        
        span.secondHalf
        {
            display: none;
        }

Download example here.