[jQuery] Expanding/collapsing tails of lists
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