Animated Text Truncate & Content Toggle Plugin - jQuery Collapser
File Size: | 29.2 KB |
---|---|
Views Total: | 2734 |
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.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.collapser.js"></script>
2. Truncate your text by words and specify the number of words you'd like to show.
$('p').collapser({ mode: 'words', truncate: 2 });
3. Truncate your text by characters and specify the number of characters you'd like to show.
$('p').collapser({ mode: 'chars', truncate: 140 });
4. Truncate your text by lines and specify the number of lines you'd like to show.
$('p').collapser({ mode: 'lines', truncate: 3 });
5. Hide the paragraph on page load and toggle the text on click.
$('.header').collapser({ mode: 'block', showText: 'Show paragraph', hideText: 'Hide paragraph', changeText: true });
6. All default configuration options.
$('.content').collapser({ // target element target: 'next', // 'words', 'lines', 'chars' or 'block' mode: 'words', // animation speed speed: 'slow', // the number of words/lines/chars to truncate truncate: 10, // custom ellipsis ellipsis: '...', // 'fade' or 'slide' effect: 'fade', // custom control button controlBtn: '', // show/hide text showText: 'Show more', hideText: 'Hide text', // show/hide classes showClass: 'show-class', hideClass: 'hide-class', // target block blockTarget: 'next', // or 'slide' blockEffect: 'fade', // hide or show on pange load atStart: 'hide', // remove the “hide” button once the content is expanded lockHide: false, // change the text of the element during the collapse and expand state changeText: false });
7. Callbacks available.
$('.content').collapser({ beforeShow: null, afterShow: null, beforeHide: null, afterHide: null });
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.