Examples of how to use the script "read more".

Code JS:read-more-p.js

 // <script>
$(document).ready(function(){
    $('p').each(function(){
    var trimLength = 200; // The setting is 200 characters
    var trimMargin = 1.2; // don't trim just a couple of words
    if($(this).text().length > (trimLength * trimMargin)) {
      var text = $(this).text();
      var trimPoint = $(this).text().indexOf(" ", trimLength);
      var newContent = text.substring(0, trimPoint)+'<span class="read-more-p">'+text.substring(trimPoint)+'</span><span class="toggle">... <a href="#">Read more</a></span>';
      $(this).html(newContent);
    }
  });
  $('.toggle a').click(function(e){
    e.preventDefault();
    var para = $(this).closest('p');
    var initialHeight = $(this).closest('p').innerHeight();
    para.find('.read-more-p').show();
    para.find('.toggle').hide();
    var newHeight = para.innerHeight();
    para.css('max-height', initialHeight+'px');
    para.animate({ maxHeight: newHeight }, 200, function(){
      para.css('max-height', 'none');
    });
  });
});
//</script> 

Code CSS:read-more-p.css

/*<style>*/
.read-more-p {
  display: none;
}
/*</style>*/

Code HTML: Sample HTML

<!--Example how to use the button-->
<div class="col-md-4">
<div id="read-more">
<h2>Heading 4</h2>
<p>Sample text 1</p>
<p class="collapse" id="CollapseName-1">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<a class="collapsed btn btn-outline-info btn-sm" data-toggle="collapse" href="#CollapseName-1" aria-expanded="false" aria-controls="CollapseName-1"></a>
</div>
</div>
<!--------->
<!--Example how to use a link-->
<div class="col-md-4">
<div id="read-more">
<h2>Heading 2</h2>
<p>Sample text 2</p>
<p class="collapse" id="CollapseName-2">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<a class="collapsed" data-toggle="collapse" href="#CollapseName-2" aria-expanded="false" aria-controls="CollapseName-2"></a>
</div>
</div>	

Code CSS:read-more-b4.css

/*<style>*/
#read-more {
font-size: 14px;
line-height: 1.5;
}

#read-more p.collapse:not(.show) {
height: 64px !important;
overflow: hidden;

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;  
}

#read-more p.collapsing {
min-height: 64px !important;
}

#read-more a.collapsed:after  {
content: 'Read More →';
}

#read-more a:not(.collapsed):after {
content: '← Read Less';
}
/*</style>*/

Code JS:read-more-b4.js

//<code>
$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 200;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Read more >";
    var lesstext = "< Less more";
    

    $('.more').each(function() {
        var content = $(this).html();
 
        if(content.length > showChar) {
 
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
 
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
 
            $(this).html(html);
        }
 
    });
 
    $(".morelink").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;
    });
});
//</code>

Code HTML:Example how to use

	<!--Example how to use-->
	<p class="more">
	Sample text ...
	</p>
	<span class="more">
	Sample text ...
	</span>
	<article class="more">
	Sample text ...
	</article>
	<div class="more">
	Sample text ...
	</div>
	<cite class="more">
	Sample text ...
	</cite>

Code CSS:read-more-jq.css

/* <style> */
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
.morecontent span {
	display: none;
}
.morelink {
    display: block;
}
/* </style> */