javascript - jQuery toggle show/hide elements after certain number of matching elements

Question

In implementing faceted search, if the number of options is 7 or less, I will show them all. If the number of options exceed 7, I will show the first 5 only and insert a link that will toggle the display of these options.

My question in this case is, how to run through the list of matching elements, in this case li's that fall within .facet ul, and perform this function. Secondly, I need to .appendTo() an li at the end of .facet ul that displays text based on whether or not I am showing all or some.

If showing all, I want the text to read "... Fewer Choices". If I am showing few I would like the text to read "... n More Choices".

A push in the right direction for each of these functions, or a complete explanation is much appreciated.

Code below for reference.

    <div class="facet">
  <h4>Brands</h4>
  <ul>
   <li><a class="all" href="#">Really long brand name facet to show what happens with multi-line facets <em>(63)</em></a></li>
   <li><a class="all" href="#">Joe Rocket <em>(57)</em></a></li>
   <li><a class="all" href="#">Icon <em>(42)</em></a></li>
   <li><a class="all" href="#">Fieldsheer <em>(37)</em></a></li>
   <li><a class="all" href="#">Tour Master <em>(21)</em></a></li>
   <li><a class="all" href="#">AGV Sport<em>(21)</em></a></li>
   <li><a class="all" href="#">Alpinestars<em>(21)</em></a></li>
   <li><a class="all" href="#">Cortech<em>(21)</em></a></li>
   <li><a class="all" href="#">Element<em>(21)</em></a></li>
   <li><a class="all" href="#">Fieldsheer<em>(21)</em></a></li>
   <li><a class="all" href="#">Firstgear<em>(21)</em></a></li>
   <li><a class="all" href="#">FMF Apparel<em>(21)</em></a></li>
   <li><a class="all" href="#">Icon<em>(21)</em></a></li>
   <li><a class="all" href="#">Joe Rocket<em>(21)</em></a></li>
   <li><a class="all" href="#">O'Neal Racing<em>(21)</em></a></li>
   <li><a class="all" href="#">Power Trip<em>(21)</em></a></li>
   <li><a class="all" href="#">REV'IT!<em>(21)</em></a></li>
   <li><a class="all" href="#">River Road<em>(21)</em></a></li>
   <li><a class="all" href="#">Rockstar<em>(21)</em></a></li>
   <li><a class="all" href="#">Scorpion<em>(21)</em></a></li>
   <li><a class="all" href="#">Shift Racing<em>(21)</em></a></li>
   <li><a class="all" href="#">Speed and Strength<em>(21)</em></a></li>
   <li><a class="all" href="#">Spidi<em>(21)</em></a></li>
   <li><a class="all" href="#">Teknic<em>(21)</em></a></li>
   <li><a class="all" href="#">Tour Master<em>(21)</em></a></li>
   <li><a class="all" href="#">Troy Lee Designs<em>(21)</em></a></li>
   <li><a class="all" href="#">Vega<em>(21)</em></a></li>
   <li><a class="all" href="#">Yoshimura<em>(21)</em></a></li>
   <li><a class="all" href="#">Z1R<em>(21)</em></a></li>
  </ul>
 </div>

The 'all' class is irrelevant here and serves another purpose. Feel free to disregard it.

Answer 1

You're looking for the :gt selector:

$('.facet').each(function() {
    var ul = $('ul', this);
    if(ul.children('li').size() <= 7) return;

    var hiddenElements = ul.children('li:gt(4)', this).hide();

    var showCaption = '...' + hiddenElements.size() + ' More Choices';
    ul.append(
        $('<li class="toggler">' + showCaption + '</li>')
            .toggle(
                function() { 
                    hiddenElements.show();
                    $(this).text('...Fewer Choices');
                }, 
                function() { 
                    hiddenElements.hide();
                    $(this).text(showCaption);
                }
            )
    );
});

DEMO