Question

How can I add a function for hide/show elements in the list?

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.

<div class="filter_item">
...
<h3>Network Name:</h3>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
...
</div>

and js code

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

How to implement hide items when we click on “hide” link?

Answer 1

While this seems overly complex, this will work for you:

$(this).closest('ul').children('li:gt(2):not(:last)').hide();

First it searches for the parent <ul>, and then hides child <li>s, but leaves the parent of the “Show/Hide” link.

Going with $(this).closest('li').prevAll().slice(2).hide(); didn’t work quite well – it hid the first nodes, not the last. prevAll seem to return elements in reverse order.