[jQuery] Re: Only show 5 list item, hide the rest?

[Stephan Veigl]

Hi,

suppose you have everything in #myList, than you could use the
following lines to split the list:

 // move overhang (index > 5) to extended list and hide
 $('#myListExt').append($('#myList > li').slice(5))
                        .hide();


Use this function to add a new list item:

  function addLog(txt) {
        var li = $('#myList > li');
        
        // move last item to extended list
        if ( li.length > 4)
                $('#myListExt').prepend(li.slice(4))
        
        // add new item
        $('#myList').prepend("<li>"+txt+"</li>");
  }


by(e)
Stephan


2009/2/11 mofle <mofl...@gmail.com>:
>
> Hi, thank you for all your help ;)
>
> How can I have the list splitted automatically?
>
> Because the list is for a log, and the newest items are on the top,
> and as new items are added, the old ones are pushed down, and hidden.
>
>
>
>
>
> On Feb 11, 10:31 am, Stephan Veigl <stephan.ve...@gmail.com> wrote:
>> Hi,
>>
>> ok, in this case it would be, IMHO, the easiest way to split the list
>> in two <ul>s and clue them together with CSS.
>>
>> <ul id="myList" style="margin-bottom: 0px">
>>         <li>Item 1</li>
>>         <li>Item 2</li>
>>         <li>Item 3</li>
>>         <li>Item 4</li>
>>         <li>Item 5</li>
>> </ul>
>> <ul id="myListExt" style="margin-top: 0px">
>>         <li>Item 6</li>
>>         <li>Item 7</li>
>>         <li>Item 8</li>
>>         <li>Item 9</li>
>>         <li>Item 10</li>
>> </ul>
>>
>> $(document).ready(function(){
>>    var list = $('#myListExt');
>>    list.hide();
>>
>>    $('a#myList-toggle').click(function() {
>>       list.slideToggle(400);
>>       return false;
>>    });
>>
>> });
>>
>> Of course you can to the list splitting automatically as well.
>>
>> by(e)
>> Stephan
>>
>> 2009/2/11 mofle <mofl...@gmail.com>:
>>
>>
>>
>> > Thanks, one problem though.
>>
>> > I slides each individual li item, i need it to slide it like if i
>> > would slide the whole list, but only the rest of the list that is
>> > hidden?
>>
>> > On Feb 10, 3:01 pm, Stephan Veigl <stephan.ve...@gmail.com> wrote:
>> >> Hi,
>>
>> >> try this one:
>>
>> >>     var list = $('#myList li:gt(4)');
>> >>     list.hide();
>> >>     $('a#myList-toggle').click(function() {
>> >>        list.slideToggle(400);
>> >>        return false;
>> >>     });
>>
>> >> by(e)
>> >> Stephan
>>
>> >> 2009/2/10 mofle <mofl...@gmail.com>:
>>
>> >> > Hi.
>>
>> >> > I have an unordered list like this one:
>>
>> >> > <ul id="myList">
>> >> > <li>Item 1</li>
>> >> > <li>Item 2</li>
>> >> > <li>Item 3</li>
>> >> > <li>Item 4</li>
>> >> > <li>Item 5</li>
>> >> > <li>Item 6</li>
>> >> > <li>Item 7</li>
>> >> > <li>Item 8</li>
>> >> > <li>Item 9</li>
>> >> > <li>Item 10</li>
>> >> > </ul>
>>
>> >> > I want to only show the 5 first items, and hide the rest.
>>
>> >> > I have a link to toggle the hidden elements on and off:
>> >> > <a href="#" id="myList-toggle">Show the rest</a>
>>
>> >> > I use the slideToggle(400) to slide the rest of the list in.
>>
>> >> > Anyone?
>>
>> >> > This is what I have now, it just toggles the whole list.
>> >> > <script type="text/javascript">
>> >> >      $(document).ready(function() {
>> >> >        $('#myList').hide();
>> >> >        $('a#myList-toggle').click(function() {
>> >> >          $('#myList').slideToggle(400);
>> >> >          return false;
>> >> >        });
>> >> >      });
>> >> > </script>