JQuery toggles the display / hide of elements after a certain number of matching elements

Question

When implementing a faceted search, if the number of options is 7 or less, I will show them everything. If the number of options exceeds 7, I will show only the first 5 and insert a link that will switch with the display of these parameters.

My question in this case is how to start a list of matching elements, in this case li , which fall into .facet ul , and perform this function. Secondly, I need .appendTo() a li at the end of .facet ul , which displays text based on whether I show all or some of them.

If you show everything, I want the text to read "..." Less choice. "If I show a little, I would like the text to read" ... n More Choices ".

Clicking in the right direction for each of these features, or a full explanation is greatly appreciated.

The code below is 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 a different purpose. Feel free to ignore it.

Answer 1

You are looking for :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

Answer 2

Here is the start:

 $(document).ready( function(){ var count=0; $('div.facet ul li').each( function(){ if(++count == 7){ $(this).parent().append('<li><a href="">Click here for more...</a></li>'); } else if(count > 7){ $(this).css('display','none'); } } ); } ); 

Answer 3

my two cents

 $('.facet li').each(function(x) { var warn = '' if($('.facet li').length > 7){ if (x >= 5){ $(this).hide(); } warn = '.. Fewer Choices'; }else{ $(this).show(); warn = 'test to append if less than 7 than seven'; } if ($('#warn').length == 0){ $('.facet ul').append('<li id="warn"></li>'); } $('#warn').text(warn); });