Jquery event issue

[frankstuner]

I'm new to jquery and javascript in general, I've been trying to modify one of the examples off the jquery site but have been having trouble adding classes/id's to example and having it work in the same way.

This is the jquery page [api.jquery.com...]

This is the original version:

<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
<script>function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
}
$("ul").click(handler).find("ul").hide();</script>

This is what i was trying to do:

<ul id="nav">
<li class="parent-sub">item 1
<ul class="child-nav">
<li class="child-sub">sub item 1-a</li>
<li class="child-sub">sub item 1-b</li>
</ul>
</li>
<li class="parent-sub">item 2
<ul class="child-nav">
<li class="child-sub">sub item 2-a</li>
<li class="child-sub">sub item 2-b</li>
</ul>
</li>
</ul>
<script>
function handler(event)
{
var $target = $(event.target);
if( $target.is("li.child-sub") )
{
$target.children().toggle();
}
}
$("ul#nav").click(handler).find("ul.child-nav").hide();
</script>

When I've tried a few different configs it still breaks the functionality in one way or another.

Can anyone point me in the right direction please?

[frankstuner]

all good, worked it.