title: jQuery toggle show/hide elements after certain number of matching elements
body: <p>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.</p>
  
  <p>My question in this case is, how to run through the list of matching elements, in this case <code>li</code>'s that fall within <code>.facet ul</code>, and perform this function. Secondly, I need to <code>.appendTo()</code> an <code>li</code> at the end of <code>.facet ul</code> that displays text based on whether or not I am showing all or some.</p>
  
  <p>If showing all, I want the text to read "... Fewer Choices". If I am showing few I would like the text to read "... <em>n</em> More Choices".</p>
  
  <p>A push in the right direction for each of these functions, or a complete explanation is much appreciated.</p>
  
  <p>Code below for reference.</p>
  
  <pre><code>    &lt;div class="facet"&gt;
    &lt;h4&gt;Brands&lt;/h4&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Really long brand name facet to show what happens with multi-line facets &lt;em&gt;(63)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Joe Rocket &lt;em&gt;(57)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Icon &lt;em&gt;(42)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Fieldsheer &lt;em&gt;(37)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Tour Master &lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;AGV Sport&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Alpinestars&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Cortech&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Element&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Fieldsheer&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Firstgear&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;FMF Apparel&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Icon&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Joe Rocket&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;O'Neal Racing&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Power Trip&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;REV'IT!&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;River Road&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Rockstar&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Scorpion&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Shift Racing&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Speed and Strength&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Spidi&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Teknic&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Tour Master&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Troy Lee Designs&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Vega&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Yoshimura&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="all" href="#"&gt;Z1R&lt;em&gt;(21)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The 'all' class is irrelevant here and serves another purpose. Feel free to disregard it.</p>