Question

I’m using the following jQuery code to collapse lists from left to right: (See demonstration at http://jsfiddle.net/uvYDN/)

$('ul').hide()
$('li').contents()
    .filter(function() {return this.nodeType === 3})
    .wrap('<a>');

$('a').click(function() {
$(this).next('ul').toggle()
})

I would like to keep this basic functionality, but the items of the next nesting level shouldn’t appear all at once, but sequentially one by one from top to bottom, for example after another mouseclick or keyboard input. So that in the above demonstration, a click on “Item
2” would only show “Item 4”, and “Item 5” would only be added after another input.

I’m just getting into programming, so any advice would be very helpful for me!

Answer 1

Here is a way to sequentially show children items http://jsfiddle.net/uvYDN/13/ – Item 2. If you also need to hide them back use the same logic for toggling after all children have been showed.

Forget all that array stuff it’s way too complicated, I tried it for a short while then realized there’s a simpler way. Here‘s a working fiddle of my solution. You can tidy it up yourself or maybe someone better than me can optimize it. But it works nonetheless.

Oh yeah, and pimvdb’s suggestion is great.