How can I use jQuery and/or CSS3 to change how many unordered list items are displayed?

Question

Hey fine folks of Stack Overflow.

I have a bunch of unnested, unordered list items. They look like this:

I want the user to be able to increase or decrease (preferably with a nice animation) the number of these list items that are displayed on the page, say, via + and - buttons. How can I best do this with jQuery and/or CSS3?

Here is my Mako template and linked CSS file , as requested.

Answer 1

You could try something like this. It's fairly rudimentary, but it works-ish.

http://jsfiddle.net/CnKXK/