rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

Dynamically shortened Text using jQuery

You ever read long, almost never ending paragraphs without thinking seriously, this should be shorter, or I should be able to shrink this!?

For those who thinks this or saying: I can do this?, there's a very simple solution for this using jQuery.

The HTML

Let start with a simple text (lorem ipsum) that look like this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis,<p/p>
<p>quam ligula sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis.</p>
<p>Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec.<p/p>

CSS

Let create a basic style, sorry I won't do this for you.

* {
  margin: 0px;
  padding: 0px;
}
a {
  color: blue;
  cursor: pointer;
}
p {
  margin: 1em 0;
}

jQuery Code

Now, the fun part. This will take the text and turn it into: Lorem ipsum dolor ... more. The "more" will be clickable and the text will automatically expand. In this case, I use only the first 20 characters: $('#more').text().substr(0, 20), if you need more, simply change the number from 20 to the one you like.

$(document).ready(function() {
  var orgContent = $('#more').html();
  var txtContent = $('#more').text().substr(0, 20) + ' ... <a id="morelink">more</a>';
  $('#more').html(txtContent);
  $("body").on("click", '#morelink', function(){
    $('#more').html(orgContent);
    $('<a id="lesslink">less</a>').appendTo('#more p:last-child');
  });
  $("body").on("click", '#lesslink', function(){
    $('#more').html(txtContent);
  });
});