Truncate lists with Jquery

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?

---

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.

---

Instead of showing and hiding each element individually, you can add a class to the li elements after the first three, then use CSS to show and hide them by adding a class to the ul parent:

Javascript:

$(function(){

  $('.filter_item ul')
  .addClass('hidemore')
  .each(function(){ $(this).find('li:gt(2)').addClass('more'); })
  .append($('<li/>').append($('<a/>').attr('href','javascript:void(0)').text('more...')))
  .find('a').toggle(function(){
    $(this).text('less...').closest('ul').removeClass('hidemore');
  },function(){
    $(this).text('more...').closest('ul').addClass('hidemore');
  });

});

CSS:

.filter_item ul.hidemore li.more { display: none; }

Notes:
The href attribute with javascript:void(0) is added to the links so that they appear as links, but doesn't navigate anywhere. That way the click handlers doesn't have to stop the event.

The .find('a') after adding the elements is because it doesn't work to add the click event handlers to the elements until after they have been added to the page. (If the text in the lists also contains links, you would need to add a class to the added links, so that they can be targeted specifially in this stage.)

---

Final code looks like this

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(){
        $(this).closest('ul').children('li:gt(2):not(:last)').hide();
        var curr_ul_y_pos = $(this).closest('ul').prev().offset().top;
        $('html:not(:animated), body:not(:animated)').animate({
            scrollTop: curr_ul_y_pos-5
        }, 'normal');
        $(this).attr('class', 'tr_more').text("More...");
    });
});

Added forgotten attributes after hide event. And page now scroll to h3 element position.

---

$('.hidelink').click(function(){
     $(this).children('li').hide();
});

This will do

---

You can also use .toggle() method as,

$(this).closest('ul').children('li:gt(2)').toggle();

Can you try this?

thanks.