Setting a View More LI's on each UL
<p>There are many groups of <code>ul/li</code> tags and if it exceeds 10 <code>li</code>'s per <code>ul</code> I want to hide anything over 10 <code>li</code>'s and replace it with a <code>View More Links..</code> link that will show the rest of the <code>li</code>'s in the <code>ul</code> when you click it.   Here is a rough version of the code I can't get to work, can someone help out with this?</p>

<pre><code>$("ul").each(function(i){   
    $(this).find("li:gt(10)").hide();
    $(this).append('&lt;li class="more-link"&gt;View More Links..&lt;/li&gt;');
    $(this).find(".more-link").click(function(){
        $(this).parent('ul').find('li').show();                                      
    });
}); 
</code></pre>

<p>The issues are that I don't think you can use <code>gt(10)</code> in <code>find</code>, or add a <code>click</code> function to <code>find</code> or use <code>parent</code> this way with <code>find</code>.</p>
