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>
