Truncate lists with Jquery
<p>How can I add a function for hide/show elements in the list?</p>

<p>For example we've several lists. When we click on "show" link, all list items are displayed, when we click on "hide" link, hide items in a list with an index greater than 3.</p>

<pre><code>&lt;div class="filter_item"&gt;
...
&lt;h3&gt;Network Name:&lt;/h3&gt;
&lt;ul&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
&lt;/ul&gt;
...
&lt;/div&gt;
</code></pre>

<p>and js code</p>

<pre><code>&lt;script type="text/javascript"&gt;
    //&lt;![CDATA[
        jQuery(document).ready(function($){
            $('.filter_item ul').each(function(){
                $('li:gt(2)', this).hide();
                if ($(this, 'li').children().length &gt; 3) {
                    $(this, ':last').append('&lt;li&gt;&lt;a href="javascript:void(0);" class="tr_more"&gt;More...&lt;/a&gt;&lt;/li&gt;');
                }
            });
            $('.tr_more').toggle(function(){
                $(this).closest('li').siblings().show();
                $(this).attr('class', 'tr_less').text("Less...");
            }, function(){
                ????
            });
        });
    //]]&gt;
&lt;/script&gt;
</code></pre>

<p>How to implement hide items when we click on "hide" link?</p>
