Readmore Link in Content using Jquery

In this tutorial, I'll show you how to make Readmore Link in Content using Jquery.

Click Here for DEMO

First thing, we need HTML to add some content. Here is the code:

HTML
<h2>Readmore in Content</h2>
<div class="readmore-content">
   <div class="holder">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum libero dicta quasi, dolores. Aperiam delectus ducimus expedita praesentium doloribus illo nihil vitae amet eaque iure! Ducimus accusamus ut velit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae ratione expedita distinctio dolores quod minima inventore, itaque similique, modi, iure dolore. Ducimus, repudiandae quae repellat hic ipsam vitae, accusamus sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum tenetur eum blanditiis ullam. Voluptatum aliquid, omnis consequuntur quae ab velit dolore ea quam ipsa nobis labore vero voluptas quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo praesentium porro quod ea consectetur assumenda. Vitae obcaecati facilis deleniti deserunt aliquid facere, nesciunt libero iusto quasi consequuntur, accusamus. Minima, blanditiis.
   </div>
</div>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
.readmore-content{
   .morecontent{
      span{
         display: none;
      }
   }
}

Finally, we need Jquery Code to add readmore link in content in your project. So, here's the Jquery below.
Jquery
$(document).ready(function(){
 var showChar = 450;
 var ellipsistext = "...";
 var moretext = "more";
 var lesstext = "less";
 $('.readmore-content .holder').each(function(){
  var content = $(this).html();
  if(content.length > showChar) {
   var c = content.substr(0, showChar);
   var h = content.substr(showChar-1);
   var fullContent = c + '' + ellipsistext + '' + h + '' + moretext + ''
   $(this).html(fullContent);
  }
 });
 $('.morelink').click(function(){
  if($(this).hasClass('less')){
   $(this).removeClass('less');
   $(this).html(moretext);
  } else {
   $(this).addClass('less');
   $(this).html(lesstext);
  }
  $(this).prev().slideToggle(200, function(){
   if($(this).is(':visible')) {
    $(this).css({
     'display': 'inline'
    });
   }
  })
  return false;
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!

Share this

Related Posts