Programming Answer: Expand list with slideToggle

Hi.

I have an unordered list like this one:

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

and this jQuery code:

  var list = $('#myList li:gt(4)');
    list.hide();
     $('a#myList-toggle').click(function() {
        list.slideToggle(400);
        return false;
   });

The problem is that it slides each individual li item, i need to slide the rest of the list, like i would slide the whole list.

How can I do that?

From stackoverflow

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

mofle : 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?
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.

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"></script>

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

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;
    });

});

mofle : 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.

Thanks, for all your help.

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

Any solution?

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})});
    });

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

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

Programming Answer

Wednesday, March 30, 2011

Expand list with slideToggle

0 comments:

Post a Comment

Blog Archive