jquery selector selection bug

jquery selector selection bug

I got the following structure: - nested UL
<ul>
<li>Category 1
<ul>
<li> Category 1.1</li>
<li> Category 1.2</li>
<li> Category 1.3</li>
</ul>
</li>
<li> Category 2
<ul>
<li>Category 2.1</li>
<li>Category 2.2</li>
<li>Category 2.3</li>
</ul>
</li>
<li>Category 3
<ul>
<li>Category 3.1</li>
<li>Category 3.2</li>
<li>Category 3.3</li>
</ul>
</li>
I've applied a rule with CSS:
ul{
list-style: none;
padding:0;
margin:0;
}
.depth-one{
display:block;
}
.depth-two{
display:none;
}
which leaves only the MAIN category shown.
$(document).ready(function() {
$(".depth-one > li").click(function() {
selector = $(this).find(' > .depth-two');
if($(selector).css("display") == "none"){
selector.slideDown(800);
} else {
selector.slideUp(800);
}
});
});
this one, toggles the SUB categories when the MAIN category is being clicked.
here is a fiddle to demonstrate: http://jsfiddle.net/NB4bN/1/
Now, as you can see, when I'm clicking on the SUBCATEGORY, the whole
category slides up, any idea why? I'm trying to achieve that only when I
click on the MAIN category, the subcategory will slides up, otherwise,
nothing happens when i click on the <li> items.
Thanks in advance!