Animated Text Truncate & Content Toggle Plugin - jQuery Collapser

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.