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 Comments

6 Responses to "Shorter list"

  • By Locutor Antonio Cezar April 9, 2013 - 6:39 pm

    Hello!
    I did some tests with your plugin, and I managed to call plugin for several different classes, using:
    $(document).ready(function() {
    $('#the-list').shorterList();
    $('#the-list1').shorterList();
    });
    but I found a problem. in the button Show All he has a “#show-all”, but in the button show less, the browser does not find any anchor and the cursor is lost; that is not good.

    Thanks.

  • By Andrew Ramsden April 9, 2013 - 11:00 pm

    Hi Antonio,

    Happy to try to help, I have a few questions for you…

    What browser are you using?

    What steps are you taking when you see the problem?

    When you notice the cursor go missing, are you using the keyboard the whole time? Or clicking the ‘Show less’ link with a mouse?

  • By Locutor Antonio Cezar April 12, 2013 - 8:48 am

    Hey. I did these tests using only the keyboard in the 3 main navigators: Internet Explorer 8, Mozilla Firefox 21 and Google Ghrome up-to-date also.
    In all of them realized more or less the same behavior:
    When I activate it reads it more, the cursor stays next to where I was in. Already when I activate the less text, then the cursor is lost.
    Nowadays, use another plugin for that, that if floodgate very well with the cursor, but he has the serious fault of cut words to the half and my Jquery’s Knowledges are minimum so that I can find a way in this.

    Thank you very much.

  • By Andrew Ramsden April 12, 2013 - 5:37 pm

    Am out of town at the moment (and not near a PC). I’ll take a look next week when I get back.

    You’re using NVDA with those browsers?

  • By Locutor Antonio Cezar April 12, 2013 - 6:27 pm

    Hello! Thanks for if to worry. In my case, I tested with 2 screens readers. With NVDA, did not have position loss problems of the cursor movimentado with keyboard in any of the 3 navigators that I tested. Already with Jaws is Windows, the cursor movimentado just with the keyboard found some focus loss problems.
    But my site just for blind is not done, and I believe that I do not have many visitors with vision problems.
    I setuped the animation for false, because my lists are great, some of the items with several lines.
    Then I ask you: Can I use plugin in my project, what in the navigation with the mouse the cursor if floodgate well?
    1 last question: How I said above, my lists are great and each item can have several texts lines. In this case, and that is not a priority, there would be some form of limiting the content of each item in x characters, do it show everything just when if it clicked in the it reads more?

    Thanks.

  • By Andrew Ramsden April 21, 2013 - 3:09 pm

    Hi Antonio,

    I have tried using Jaws and NVDA, and can’t repeat the problem you have described.

    NVDA seems to have more trouble than Jaws, but they both keep the focus near the ‘show more’ and ‘show less’ buttons when activated.

    Can you provide more information about what the issue is and how to make it happen?

    Feel free to use the plugin in your project.

    I don’t understand the meaning of “mouse cursor if floodgate well”, can you say this another way?

    For shortening the text within a bullet point, I would recommend trying either jTruncate jQuery Plugin or jQuery Expander Plugin.

Leave a reply