Expand & Collapse Text Using Read More/Less links - Expander

Expander is a simple, customizable jQuery text truncation plugin that allows you to quickly and easily add expand & collapse functionality to any content.

The read more link will turn into a clickable anchor tag when the text is collapsed. Conversely, the read less link will turn into an anchor tag when the text is expanded.

This plugin uses jQuery's slide and fade transitions and can support both inline- and block-level elements.

How to use it:

1. Add the jQuery Expander plugin somewhere after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.expander.min.js"></script>

2. Call the function on the targer element. By default, the plugin automatically collapses the text that is more than 100 characters.

<p class="demo">
  Your Text Here
</p>

$(function(){
  $('.demo').expander();
});

3. Override the default limit of characters. Default: 100.

$('.demo').expander({
  slicePoint: 50,
});

4. Determine whether to show a word counter that displays the number of words behind the Read More link. Default: false.

$('.demo').expander({
  showWordCount: true,
  wordCountText: ' ({{count}} words)',
});

5. Customize the read more & read less links.

$('.demo').expander({
  expandText: 'read more',
  expandPrefix: '… ',
  moreLinkClass: 'more-link',
  userCollapseText: 'read less',
  userCollapsePrefix: ' ',
  lessLinkClass: 'less-link',
});

6. Set the transitions when expanding & collapsing the content.

$('.demo').expander({
  // or 'fadeIn'
  expandEffect: 'slideDown', 
  expandSpeed: 250,
  // or 'fadeOut'
  collapseEffect: 'slideUp',
  collapseSpeed: 200,
});

7. More configuration options.

$('.demo').expander({

  // whether to keep the last word of the summary whole (true) or let it slice in the middle of a word (false)
  preserveWords: true,

  // whether to normalize the whitespace in the data to display (true) or not (false)
  normalizeWhitespace: true,

  // text to include between summary and detail. Default ' ' prevents appearance of
  // collapsing two words into one.
  // Was hard-coded in script; now exposed as an option to fix issue #106.
  detailPrefix: ' ',

  // a threshold of sorts for whether to initially hide/collapse part of the element's contents.
  // If after slicing the contents in two there are fewer words in the second part than
  // the value set by widow, we won't bother hiding/collapsing anything.
  widow: 4,

  expandAfterSummary: false,

  // Possible word endings to test against for when preserveWords: true
  wordEnd: /(&(?:[^;]+;)?|[0-9a-zA-Z\u00C0-\u0100]+|[^\u0000-\u007F]+)$/,

  // class names for summary element and detail element
  summaryClass: 'summary',
  detailClass: 'details',

  // number of milliseconds after text has been expanded at which to collapse the text again.
  // when 0, no auto-collapsing
  collapseTimer: 0,

  // allow the user to re-collapse the expanded text.
  userCollapse: true,
  
});

8. Callback functions.

$('.demo').expander({

  onSlice: null, // function() {}
  beforeExpand: null, // function() {},
  afterExpand: null, // function() {},
  onCollapse: null, // function(byUser) {}
  afterCollapse: null // function() {}
  
});

---

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