[jQuery] li:nth-child(10) toggle

[jQuery] li:nth-child(10) toggle


There has got to be a better way to write this? Basically, I'm
returning a bunch of list item and after the 10th one, setting the
rest to display:none and adding a <more> link. Clicking on the <more>
link removes the display:none and adds a <less> link at the bottom.
I think jQuery 1.3.2 is having some trouble with the nth-child
approach. Can someone point me in the right direction on how to
improve this?
Thanks.
$(document).ready(function() {
$('.main ul').each(function() {
$('li', this).each(function(i) {
if (i > 9) {
if (i == 10) {
$(this).parent().append('<li id=\"toggleon
\" class=\"toggle\"><a href=\"#\">more >></a></li><li id=\"toggleoff\"
class=\"toggle\" style=\"display:none\"><a href=\"#\"><< less</a></
li>');
}
$(this).hide();
}
});
});
$('li.toggle').click(function() {
$(this).parent().find('li:nth-child(10) ~ li').toggle
();
$(this).find('#toggleon').toggle();
$(this).find('#toggleoff').toggle();
return false;
});
});