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>
