Shorter list

The “shorter list” plugin for jQuery is a simple script that has a very specific purpose.

This plugin will truncate a list to the number of list items you specify (5 by default) and provide a button to toggle the visibility of the rest of the list.

It is useful for compacting a long list into a small space and providing a means for users to access the rest of the information if they choose.

Examples

Place the following code in the <head> of your XHTML document.

Note: For best performance, it is recommended that you combine all the JavaScript files below into a single minified file.

<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.shorter-list.js"></script>

The plugin has been setup to act on any simple ul or ol list in the <body> of your document:

<ul id="the-list">
    <li><a href="#">List item 1</a></li>
    <li><a href="#">List item 2</a></li>
    <li><a href="#">List item 3</a></li>
    <li><a href="#">List item 4</a></li>
    <li><a href="#">List item 5</a></li>
    <li><a href="#">List item 6</a></li>
    <li><a href="#">List item 7</a></li>
</ul>

You then need to specify in a script block which lists to apply the plugin to:

$(document).ready(function() {
    $('#the-list').shorterList();
});

Working example

A complete demonstration of the shorter list plugin is available.

Download

Shorter list is licensed under the The GNU General Public License (GPL), by downloading it you are agreeing to abide by the terms of that license.

Package

Download the complete Shorter list 0.4 example package (.zip)

Individual files

Plugin options

The following options can be can be passed on initialisation of the plugin:

options = {
	howShort           : 5, // how many list items to display before truncating?
	toggleShowText     : 'Show all',
	toggleHideText     : 'Show less',
	toggleShowTitle    : '',
	toggleHideTitle    : '',
	useSimpleAnimation : false // some really long lists perform poorly with the 
	                           // complexity of the normal animation, give option
	                           // to simplify for those situations.
};
$('#the-list').shorterList(options);

Posted in

6 Responses to "Shorter list"

Leave a reply