ansaurus

Question

Answer 1

A:

Quick & not-so-dirty way: wrap it with a div element and slideToggle('#myList div.wrapper').

ohnoes 2009-02-11 08:55:47

That method doesn't work, 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.Is it possible?

mofle 2009-02-11 10:58:13

Answer 2

A:

You can give a height to UL tag with overflow:hidden. Then you use animation({height:auto}) to show all. Otherwise, you don't have any viable solution.

Ionut Staicu 2009-02-11 12:01:31

Answer 3

+1 A:

Hi, your method didn't work because it would find the height with height: auto.

After a lot of fail and try, I came up with something that works, almost.

Do you have any comment on my code, I would really appreciate it.

And how would I do it, if I want the same link to collapse the list again

<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"&gt;&lt;/script&gt;

 <script type="text/javascript">
  $(document).ready(function() {

  var list = $('ul#myList');  
  var original_height = list.height(); 
  list.css({height:$('#myList li').height()*5});

$('a#myList-toggle').click(function() {
list.animate({height:original_height}) 
       return false;
    }); 

      });
</script> 

<style type="text/css">
ul#myList {
    overflow: hidden;
}
</style>
</head>
<body>

 <a href="#" id="myList-toggle">Show the rest</a> 

 <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> 


</body>
</html>

mofle 2009-02-11 13:04:17

Answer 4

+1 A:

Pretty clumsy solution IMHO, but if it works for you - it works for you...

For the list to collapse and expand by clicking on the same link:

$(document).ready(function() {

        var list = $('ul#myList');   
        var original_height = list.height();
        var new_height = $('#myList li').height()*5;
        list.css({height:new_height});

        $('a#myList-toggle').click(function() {
        if( list.height() == original_height ) {
            list.animate({height:new_height});
        } else {
            list.animate({height:original_height});
        }
        return false;
    });

});

2009-02-11 18:55:02

It worked, but is there a way to make this code better?Because when I add top and bottom padding to the li elements, it doesn't work.

mofle 2009-02-12 07:25:01

Answer 5

A:

Thanks, for all your help.

But it didn't work in IE6, where I need it.

Any solution?

mofle 2009-02-12 08:06:29

Answer 6

A:

Whats the problem with simply toggeling the list instead of the elements?

 $(function(){
    var listheight = $("#mylist").height();
    $("a#myList-toggle").toggle(function(){
        $("#mylist").slideToggle();
    },function(){$("#mylist").animate({height:listheight})});
    });

Kristoffer S Hansen 2009-02-12 16:35:46

I need to add the slide effect to the list elements after the 5th one, not the whole list. Anyone?

mofle 2009-02-17 14:20:48

Answer 7

A:

Does someone know why it doesn't work in IE6, and maybe a fix?

mofle 2009-02-18 09:58:24

ansaurus

tags:

views:

answers:

Expand list with slideToggle

related questions