This time I will share jQuery Plugin and tutorial about Animated Text Truncate & Content Toggle Plugin – jQuery Collapser, hope it will help you in programming stack.
File Size: | 29.2 KB |
---|---|
Views Total: | 2009 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Collapser is a flexible, responsive, multifunctional jQuery Text Truncate & Content Toggle plugin that truncates long text by words, characters or lines and shows/hides truncated text with fade or slide animations.
How to use it:
1. Include the JavaScript file jquery.collapser.js
after jQuery library and we’re ready to go.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "jquery.collapser.js" ></ script > |
2. Truncate your text by words and specify the number of words you’d like to show.
1 |
$( 'p' ).collapser({ |
2 |
mode: 'words' , |
3 |
truncate: 2 |
4 |
}); |
3. Truncate your text by characters and specify the number of characters you’d like to show.
1 |
$( 'p' ).collapser({ |
2 |
mode: 'chars' , |
3 |
truncate: 140 |
4 |
}); |
4. Truncate your text by lines and specify the number of lines you’d like to show.
1 |
$( 'p' ).collapser({ |
2 |
mode: 'lines' , |
3 |
truncate: 3 |
4 |
}); |
5. Hide the paragraph on page load and toggle the text on click.
1 |
$( '.header' ).collapser({ |
2 |
mode: 'block' , |
3 |
showText: 'Show paragraph' , |
4 |
hideText: 'Hide paragraph' , |
5 |
changeText: true |
6 |
}); |
6. All default configuration options.
01 |
$( '.content' ).collapser({ |
02 |
03 |
// target element |
04 |
target: 'next' , |
05 |
06 |
// 'words', 'lines', 'chars' or 'block' |
07 |
mode: 'words' , |
08 |
09 |
// animation speed |
10 |
speed: 'slow' , |
11 |
12 |
// the number of words/lines/chars to truncate |
13 |
truncate: 10, |
14 |
15 |
// custom ellipsis |
16 |
ellipsis: '...' , |
17 |
18 |
// 'fade' or 'slide' |
19 |
effect: 'fade' , |
20 |
21 |
// custom control button |
22 |
controlBtn: '' , |
23 |
24 |
// show/hide text |
25 |
showText: 'Show more' , |
26 |
hideText: 'Hide text' , |
27 |
28 |
// show/hide classes |
29 |
showClass: 'show-class' , |
30 |
hideClass: 'hide-class' , |
31 |
32 |
// target block |
33 |
blockTarget: 'next' , |
34 |
35 |
// or 'slide' |
36 |
blockEffect: 'fade' , |
37 |
38 |
// hide or show on pange load |
39 |
atStart: 'hide' , |
40 |
41 |
// remove the “hide” button once the content is expanded |
42 |
lockHide: false , |
43 |
44 |
// change the text of the element during the collapse and expand state |
45 |
changeText: false |
46 |
|
47 |
}); |
7. Callbacks available.
1 |
$( '.content' ).collapser({ |
2 |
3 |
beforeShow: null , |
4 |
afterShow: null , |
5 |
beforeHide: null , |
6 |
afterHide: null |
7 |
|
8 |
}); |
Changelog:
v3.0.1 (07/20/2020)
- Fix incorrect remaining count & remove console log
v3.0 (04/19/2020)
- Options updated
This awesome jQuery plugin is developed by vaakash. For more Advanced Usages, please check the demo page or visit the official website.