‹‹ homejQuery Summarize Plugin


The Summarize Plugin allows you to choose a number of "child" elements (e.g. paragraphs) to initially display as a summary, with a "read more" link that reveals the rest of the child elements when clicked.

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 class="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.
    <!-- etc.  -->
Include the jQuery core file and the Summarize plugin in the <head> of your document. After these scripts are referenced, you can reference a custom script file (preferred) to modify the expandable elements or enter the script directly in the <head> (shown below).

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

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

  // simple example, using all default options
  /***** apply the summarize() method to the "containing" element ****/

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

Summarize Plugin API / Options

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

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

Hides child elements after a given number. Lets you expand and collapse those elements.
$.fn.summarize.defaults = {
  summaryElements:    1,  // the number of child elements after which a div. 
  detailClass:        'details', // class of the div that will wrap all elements as specified.

/* expander element */
  expandText:         'read more...', // text displayed in a link instead of the hidden elements. 
  expandWrapper:      '<div></div>',
  expandClass:        'expand',
  expandInsertion:    'insertAfter', // method to use, relative to last summary element. Reasonable choices include 'insertAfter' and 'appendTo'

  expandEffect:       'fadeIn',
  expandSpeed:        '',   // speed in milliseconds of the animation effect for expanding the text
  expandCallback:     function() {}, //function to be fired *after* elements are expanded

/* collapser element */    
  collapseText:       'read less...', // allow the user to re-collapse the expanded text.
                                      // use '' or null if you don't want user to re-collapse
  collapseWrapper:    '<div></div>',
  collapseClass:      'collapse', 
  collapseInsertion:  'insertAfter', // method to use, relative to the "details" div containing the initially hidden elements 

  collapseEffect:     'fadeOut',
  collapseSpeed:      '',
  collapseCallback:     function() {} //function to be fired *after* elements are collapsed



The Summarize Plugin is available at: http://plugins.learningjquery.com/summarize/jquery.summarize.js.


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