Making a collapsible list in two directions?

I'm a beginner programmer, so this question might be a little simple. I'm using the following code in jQuery to simple collapse a list from left to right after the action of mouseclick:

$(initlist);
function initlist(){
  $('li:not(:has(ul))').css({cursor:'default','list-style-image':'none'});
  $('li:has(ul)')
    .click(collapse)
    .click()
    .css({cursor:'pointer','list-style-image':'url(plus.gif)'})
    .children().hide();
};
function collapse(event){
  if (this == event.target) {
    $(this).children().toggle();
开发者_如何学Go    $(this).css('list-style-image',
                ($(this).children().is(':hidden')) ? 'url(plus.gif)' :url(minus.gif)');
  }
};
</script>

The html are normal unordered lists looking like this:

1. Item 1
2. Item 2
   • Item 4

   • Item 5
     • Item 6
       • Item 8
     • Item 7

3. Item 3

Now I'm trying to find a way -without applying any tags or changing the html code- to make the list also collapsible from top to bottom: Each item being hidden by default and then appearing one by one if for example the down arrow is clicked on the keyboard.

For example the items 1-5 would appear with the actions: down-down-down --> mouseclick on Item 2 --> down-down.

I would really appreciate any help!

If you can wrap the text elements in your lists with an anchor tag (as done below), this whole thing becomes a lot simpler:

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

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