jQuery hide list

I need your help agai开发者_Python百科n. So I have a simple list

<ul>
 <li>First</li>
   <ul class="blah">
      <li>First a</li>
      <li>First b</li>
      <li>First c</li>
   </ul>
 <li>Second</li>
 <li>Third</li>
</ul>

And so on. So because I'm not very fluent in jQuery, I'm asking here and hoping to get an answer.

Ok so what I'd like is, when I click on the First the menu (ul class="blah") get hidden.

And then, when clicked it shows up again.

$('ul > li:first').click(function() {
   $(this).next('ul').toggle();
});

jsFiddle.

However, what you are doing is not valid HTML. Best practice is to make that ul a child of the li element, in which case your jQuery code would be...

$('ul > li:first').click(function() {
   $(this).children('ul').toggle();
});

I think this is what you are looking for : http://jsfiddle.net/9uvgs/

$(document).ready(function(){
    $('ul ul').slideUp();
    $('ul>li').click(function(){
        $(this).next('ul').slideToggle();

    });
})

This is some code I adapted from an accordion I used. It uses links as the click elements and not LI. So you might want to adapt it.