I'm probably going about this all wrong. So I'm hopeful that sharper
minds than mine can set me straight.

I have a bunch of bulleted lists on a page. I want them to be
displayed initially so that only the first two items of any list with
more than two items are shown, with the remainder being replaced by a
clickable link that will expand (and subsequently collapse) the
remainder of that list.

Here's what I have:

CSS:
<style type="text/css">
        li.more { cursor:pointer;display:none;list-style-type:none; }
        li.more:hover { text-decoration:underline; }
</style>

JS:
<script type="text/javascript">
function initCollapse()
{
        $( "ul" ).each(
                function ()
                {
                        var tailItems = $( "li:not(.more):gt(1)", this );
                        if ( tailItems.length > 0 )
                        {
                                tailItems.hide();
                                $(this).find( ".more" ).show();
                        }
                } );
        $( ".more" ).click(
                function()
                {
                        $(this).siblings( "li:gt(1)" ).slideToggle( "slow" );
                        if ( $(this).text().indexOf( "More" ) < 0 )
                                $(this).text( "More" );
                        else
                                $(this).text( "Less" );
                } );
}

$(document).ready( function() { initCollapse(); } );
</script>

HTML:
<ul>
 <li>item 00</li>
 <li>item 01</li>
 <li class="more">More</li>
</ul>
<ul>
 <li>item 10</li>
 <li>item 11</li>
 <li>item 12</li>
 <li>item 13</li>
 <!-- and so on -->
 <li class="more">More</li>
</ul>

<!-- and so on -->

In general terms, this does the job, but it's not pretty.

On IE6 (WinXP), when expanding the additional bullets show first and
then the item contents slide into view; and when collapsing the item
contents slide up leaving a vertical line of bullets which then
disappear.

On FF3RC2 (WinXP), the item contents slide up and down as required
(although when there's a large number of items, it's a bit of a mad
scramble). BUT the bullets corresponding to those additional items are
NOT displayed!

Any suggestions that would both achieve the desired effect in a
prettier and more cross-browser fashion would be greatly appreciated.

Ed

Reply via email to