Question

How can I use JQuery to do the following with the below HTML:

I want to hide/toggle 1.1, 1.2 after clicking 1 , and likewise
I want to hide/toggle 2.1, 2.2 after clicking 2 .

<ul>
<li> 1   </li>
    <ul>
    <li> 1.1 </li>
    <li> 1.2 </li>
    </ul>
<li> 2 </li>
    <ul>
    <li> 2.1 </li>
    <li> 2.2 </li>
    </ul>
</ul>

I have not had success with the following?

$("li").click(function() {
        $(this).children("ul").hide();
    });

Answer 1

$('li').click(function() {
    $(this).next('ul').toggle();
});​

http://jsfiddle.net/sdbU3/1/