jquery toggle+paginate+multiple instances

Question

Hi,

I'm a jquery newbie - wanted to ask what might be the best strategy for achieving what I am after as I think it uses a mix of jquery functions :

1. If list of items exceeds 5 items a 'more' link appears which when toggled will reveal the rest of the items. If items list is 5 or less no 'more' link is shown. Hide button also at bottom of long full revealed list. (perhaps this is toggle+pagination?)

2. And then also that this can be used in multiple instances, as it is for multiple category menu's.(to be used in typical indexhibit websites structure like http://mikeyburton.com/)

• link 1
• link 2
• link 3
• link 4
• link 5
• link 6
• link 7
• link 8
• more

Any help or links greatly appreciated.

Answer 1

This will give you the number of matched elements in a certain class:

$('.element').size();

You can use hide() and show() as mentioned above, or use toggle() to hide and show the extraneous elements. Or for large lists it might be prudent to load() or get() (ajax) those only when needed.

It looks like you want what's called an "accordian" function. You can also achieve that effect using jQuery UI's accordian widget.

If you want to not show the "more" control then hide it at the appropriate times:

if ("li.all").size() > 5) {
    $("#toggler").hide();
}

Answer 2

This can be done many ways.

The simplest way would be to load all the items and then hide all but the first 5. This can be done via jQuery's show() and hide() methods. link You can also use the size() method to find out how many items of the same class you have.

Or you can use Ajax to load the other items when needed. link

Answer 3

see also SO post to find more answers