hello, my main question is as follows: how to show only the first subchild of a ul or li upon clicking the enclosing parent.

eg:

<ul> Grandparent

<li> Child1 <li> Grandchild11</li></li>

<li> Child2 <li>GrandChild21</li><li>grandchild22</li></li>

</ul>

so, for example I would like something to the effect of

<script>

$('ul').click(function(){

$('ul').children('first li').toggle()

});

$('li').click(function(){

$('li').children('first li').toggle()

});

</script>

meaning: when i click ul, i only see the first child node (child1 and child2 will be shown, but not the grandchildren). when i click child1 or child2 i see the respective grandchild. grandchild is not shown upon clicking grandparent, only upon clicking child1 or child2.

i know i am reinventing the wheel of some pre-coded solution, but any help would be largely appreciated!