Basic Read More / Read Less Plugin With jQuery - shorten.js

shorten.js is a small jQuery plugin which limits the characters length in your text and creates read more / read less to expand & collapse the text block. Typically used for shortening descriptions and excerpts of your blog post.

How to use it:

1. Insert the shorten plugin's stylesheet and JavaScript into your jQuery page.

<link rel="stylesheet" href="shorten.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-shorten.js"></script>

2. Just call the function on the target text container and the plugin will do the rest. By default the character limit is 100 characters:

<p class="desc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla pretium nisi, non dapibus diam rhoncus sed. Vivamus vel nunc venenatis, rutrum felis at, euismod ligula. Aenean vulputate luctus ultricies. Nulla imperdiet ac arcu sit amet vestibulum. Nunc auctor cursus lectus, vel cursus dolor fringilla eget. Vestibulum porta nunc vitae urna tempor, eget aliquam purus hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec aliquet eu purus accumsan dignissim. Nulla nisi nulla, bibendum ut rhoncus nec, eleifend quis arcu.
</p>

jQuery(function($) {
  $('.desc').shorten();
});

3. Override the default character limit.

jQuery(function($) {
  $('.desc').shorten({
    chars: 100
  });
});

4. Specify the text for the read more / read less links.

jQuery(function($) {
  $('.desc').shorten({
    more: 'more',
    less: 'less'
  });
});

5. Specify the ellipses character.

jQuery(function($) {
  $('.desc').shorten({
    ellipses: '...'
  });
});

6. API methods.

// Get the text.
('.desc').shorten('text');

// Expand the text.
('.desc').shorten('expand');


// Collapse the text
('.desc').shorten('collapse');

// Update the container's text
('.desc').shorten('update', 'new content');

// Destroy the shorten instance.
('.desc').shorten('destroy');

7. Events available.

('.desc').on('shorten::ready', function (e) {
  // on ready
});

('.desc').on('shorten::expand', function (e) {
  // when expand the content
});

('.desc').on('shorten::collapse', function (e) {
  // when collapse the content
});

('.desc').on('shorten::update', function (e) {
  // when the update instance method has been called
});

('.desc').on('shorten::destroy', function (e) {
  // when an instance is destroyed
});

---

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.