‹‹ homejQuery Expander Plugin

Overview

The Expander Plugin is a simple little jQuery plugin to hide/collapse a portion of an element's text and add a "read more" link so that the text can be viewed by the user if he or she wishes. By default, the expanded text is followed by a "re-collapse" link. Expanded text can also be re-collapsed at a specified time.

If you like this plugin and you're feeling generous, perhaps you'd also like to visit my amazon.com wish list?

Quick Start Guide

Add HTML markup to your page for elements that you want to be expandable. For example:

  <div id="expandable">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
    </p>
    <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
    officia deserunt mollit anim id est laborum.
    </p>
  </div>
Include the jQuery core file and the Expander plugin in the <head> of your document. After these scripts are referenced, you can reference a custom script file to modify the expandable elements (preferred) or enter the script directly in the <head> (shown below).

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.expander.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

  // simple example, using all default options
  $('div.expandable p').expander();
  
  // *** OR ***
  
  // override some default options
  $('div.expandable p').expander({
    slicePoint:       80,  // default is 100
    expandText:         '[...]', // default is 'read more...'
    collapseTimer:    5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: '[^]'  // default is '[collapse expanded text]'
  });
  
});
</script>

See API / Options for more ways to customize the behavior and appearance of the expander.

Expander Plugin API / Options

The Expander Plugin API provides a single method with a few options.

The still in its infancy, so do not hesitate to send bug reports or feature requests to the jQuery Google Group.

expander(options)
Truncates an element's visible text at a specified location, collapsing the rest and allowing the user to expand it if he or she wishes. 
$.fn.expander.defaults = {
  slicePoint:       100,      // the number of characters at which the contents will be sliced into two parts. 
                              // Note: any tag names in the HTML that appear inside the sliced element before 
                              // the slicePoint will be counted along with the text characters.
  widow:            4,        // 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.
  expandText:       'read more...',   // text displayed in a link instead of the hidden part of the element. 
                              // clicking this will expand/show the hidden/collapsed text
  collapseTimer:    0,        // number of milliseconds after text has been expanded at which to collapse the text again
  expandEffect:     'fadeIn',
  expandSpeed:      '',       // speed in milliseconds of the animation effect for expanding the text
  userCollapse:     true,     // allow the user to re-collapse the expanded text.
  userCollapseText: '[collapse expanded text]'  // text to use for the link to re-collapse the text
};

Download

The Expander Plugin is available at: http://plugins.learningjquery.com/expander/jquery.expander.js.

Support

Support for the Expander Plugin is available through the jQuery Mailing List. This is a very active list to which many jQuery developers and users subscribe.