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.
