Well, I solved it to my client's satisfaction. It turns out that disappearing bullets were a side-effect of the fact that they weren't genuine bullets. We're using graphical bullets provided as background images to list-style-type:none unordered lists. So I was able to get a handle on the almost independent bullet action on IE6 and the disappearing bullets on FF by separating out my treatment of slideUp and slideDown and in the latter case making using of a callback function to reinstate the background images.
It's not the prettiest thing you ever saw, but it works on FF, IE6&7 and Opera 9.27. If you're interested, please take a look at http://www.gogsat.com/Testimonials.htm Ed On Jun 10, 9:45 pm, EdMartin <[EMAIL PROTECTED]> wrote: > 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
