Your HTML is not valid. You cannot have a div inside ul . Moreover, you can greatly simplify your code by moving a separate logic for each li into one common handler.
Something like that:
Demo: http://jsfiddle.net/abhitalks/XYp48/18/
CSS
ul { display: none; overflow: hidden; } ul:first-child { display: block; }
JS:
$("li").on("click", function () { $(this).children("ul").slideToggle(); return false; });
Edit
I intentionally left checking a , because pressing a will navigate through the corresponding pages (as indicated in your question), so expand / collapse does not matter.
However, according to your comment, if you really want to remove a at all from the handler, you can use the event target to handle li without a . Something like that:
Demo 2: http://jsfiddle.net/abhitalks/XYp48/22/
JS:
$("li").on("click", function (e) { var $t = $(e.target); // get the event target as a jQuery object if (!$t.is('a')) { // check if the target is not an anchor $(this).children("ul").slideToggle(); return false; } // otherwise if target is anchor, then do nothing });