jquery closing up and showing up ul

jquery closing up and showing up ul

I've got this code:
<ul class="depth-one">
<li>Category 1
<ul class="depth-two">
<li>Category 1.1</li>
<li>Category 1.2</li>
<li>Category 1.3</li>
</ul>
</li>
<li>Category 2
<ul class="depth-two">
<li>Category 2.1</li>
<li>Category 2.2</li>
<li>Category 2.3</li>
</ul>
</li>
<li>Category 3
<ul class="depth-two">
<li>Category 3.1</li>
<li>Category 3.2</li>
<li>Category 3.3</li>
</ul>
</li>
CSS:
ul {
list-style: none;
padding:0;
margin:0;
}
.depth-one {
display:block;
}
.depth-two {
display:none;
}
Jquery:
$(document).ready(function () {
$(".depth-one > li").click(function (e) {
if (e.currentTarget == e.target) {
selector = $(this).find(' > .depth-two');
if ($(selector).css("display") == "none") {
$('.depth-one > ul').slideUp(400);
$(selector).slideDown(800);
} else {
selector.slideUp(800);
}
}
});
});
What im trying to achieve is, whenever the user views one sub-category,
and then chooses to view another one, I would like to slideUp the current
visible sub-category and slideDown the new sub-category that the user
wants to see.
Here's a fiddle: http://jsfiddle.net/NB4bN/5/
Thanks in advance!