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