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

Download Basic Read More / Read Less Plugin With jQuery – shorten.js

By Posted on

This time I will share jQuery Plugin and tutorial about Basic Read More / Read Less Plugin With jQuery – shorten.js, hope it will help you in programming stack.

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

File Size: 47.9 KB
Views Total: 5642
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <link rel="stylesheet" href="shorten.css">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <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:

view source
1 <p class="desc">
2   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.
3 </p>
view source
1 jQuery(function($) {
2   $('.desc').shorten();
3 });

3. Override the default character limit.

view source
1 jQuery(function($) {
2   $('.desc').shorten({
3     chars: 100
4   });
5 });

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

view source
1 jQuery(function($) {
2   $('.desc').shorten({
3     more: 'more',
4     less: 'less'
5   });
6 });

5. Specify the ellipses character.

view source
1 jQuery(function($) {
2   $('.desc').shorten({
3     ellipses: '...'
4   });
5 });

6. API methods.

view source
01 // Get the text.
02 ('.desc').shorten('text');
03  
04 // Expand the text.
05 ('.desc').shorten('expand');
06  
07  
08 // Collapse the text
09 ('.desc').shorten('collapse');
10  
11 // Up<a href="https://www.jqueryscript.net/time-clock/">date</a> the container's text
12 ('.desc').shorten('update', 'new content');
13  
14 // Destroy the shorten instance.
15 ('.desc').shorten('destroy');

7. Events available.

view source
01 ('.desc').on('shorten::ready', function (e) {
02   // on ready
03 });
04  
05 ('.desc').on('shorten::expand', function (e) {
06   // when expand the content
07 });
08  
09 ('.desc').on('shorten::collapse', function (e) {
10   // when collapse the content
11 });
12  
13 ('.desc').on('shorten::update', function (e) {
14   // when the update instance method has been called
15 });
16  
17 ('.desc').on('shorten::destroy', function (e) {
18   // when an instance is destroyed
19 });

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

source : jqueryscript.net

Related posts: