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

[tres]

I think this is what you are looking for. I've included all of the
code I used. Tested in IE8 beta 2 (in IE7 compatibility mode), Chrome
1.0.154.48, FF 3.0.3, Opera 9.62.

Hope this works,
-Trey



<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">

jQuery(function($) {

        var
                ul          = $('ul'),
                lis         = ul.find('li'),
                anchor      = $('a'),
                liMinHeight = 0,
                liMaxHeight = 0;

        lis.each(function(i) {
                var height = $(this).outerHeight();

                if (i < 5)
                        liMinHeight += height;

                liMaxHeight += height;
        });

        ul.height(liMinHeight);

        anchor.toggle(function() {
                ul.animate({
                        height : liMaxHeight
                }, 400);
        }, function() {
                ul.animate({
                        height : liMinHeight
                }, 400)
        });

});

</script>

<style type="text/css">

ul {
        overflow : hidden;
}

</style>

<a href="#">toggle height</a>

<ul>
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
        <li>test 5</li>
        <li>test 6</li>
        <li>test 7</li>
        <li>test 8</li>
        <li>test 9</li>
</ul>