Expander is a jQuery plugin that makes it easy to support expanding long lists, tables and any group of items with "Show N more" functionality.

• Apr 27, 2012 (0.2.5): Included Grunt for building, unit testing and minification.
• Apr 23, 2012 (0.2.5): Major plugin overhaul. Supports all DOM tags with at least one child element. Packaged with minified script.
• Feb 08, 2012 (0.1.0): Initial plugin release.

First, load jQuery and the plugin:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.expander.min.js" type="text/javascript"></script>

Second, make sure you have a class in your Stylesheet to handle hidden elements:

.hidden {
  display: none;
  visibility: hidden;
}

Now, let's attach it to your list on DOM ready:

<pre>
   jQuery(document).ready(function() {
     jQuery(".expander").expander();
   });
</pre>

This will add a link to the bottom of your list object:

<table class="expander">
  ...your table info goes here as usual...
</table>
<a href="#" name class="expander-more">Show N More</span>

where N is at most 10.

If your items are filtered on certain types of rows, such as the following:

<table class="expander">
  <thead>
    ...header info...
  </thead>
  <tbody>
    <tr class="type_1">
      ...stuff about item 1, type 1...
    </tr>
    <tr class="type_1">
      ...stuff about item 2, type 1...
    </tr>
    <tr class="type_2">
      ...stuff about item 3, type 2...
    </tr>
    <tr class="type_2">
      ...stuff about item 4, type 2...
    </tr>
  </tbody>
</table>

and you only want to show more rows of a certain type, you can add in the filter parameter and specify which rows you want to expand. For example, if we wanted to only show more of type1, we would declare the following:

$('.expander').expander({ filter: 'type_1'});

Adam Conrad (@adam_conrad)

MIT License

Copyright (c) 2012, Adam Conrad (acconrad -[at]- gmail [dot] com)