Read More jQuery Plugin

Amardeep K January 19, 2023

ADN
read-more-jquery-plugin

Live Preview Download

doLessMore is a read more/read less jQuery plugin that truncates multi-line text by height and appends a toggle control to allow you to reveal or hide the truncated content.

doLessMore JavaScript Library Implementation

Include the jQuery doLessMore plugin after jQuery library


Truncate a long block of text if it is higher than 100px.

Your Long Content Here

The required CSS styles

.paragraph { overflow: hidden; }
.paragraphblock { position: relative; }
.ds-control {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: #fff;
  text-align: center;
}
.dlmexpand { padding-bottom: 20px; }

Customize the height option which will trigger the text truncating

$(function(){
  $('.paragraph').paragraph({
    lHeight : 100
  });
});

Override the default toggle icon(https://remixicon.com/) in the JS

if(this.autoHeight > this.options.lHeight){
  $(el)
    .addClass('paragraphblock')
    .addClass('dvstkcontract')
    .height(this.options.lHeight)
    // override icon classes here
    .append('
'); this.lmControl(this.autoHeight); }

 

Next: How PureVPN is better than other VPNs

also view other related posts,