ansaurus

Question

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

Answer 1

+1 A:

Here is a 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');
        }
      }
    );

  }
);

Jeremy 2010-03-09 18:51:53

Answer 2

+5 A:

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

SLaks 2010-03-09 18:55:40

Thank you, I wasn't expecting such a complete response.How would I make this local to effect each .facet individually? Currently, if there is more than one .facet on the page it would count the li's in all facets and the toggler does not function.

Greg-J 2010-03-09 19:09:41

You need to wrap it in `.each`. See my edited code.

SLaks 2010-03-09 19:20:05

I figured that based on Jer's response, thank you.Finally, I'm having trouble with the logic of displaying all options, unless the number of options exceeds 7, in which case I would only show 5. This prevents there from only being one option in the More Choices link.

Greg-J 2010-03-09 19:21:44

I didn't see that requirement. See my new edit.

SLaks 2010-03-09 19:25:05

Answer 3

A:

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);
});

mcgrailm 2010-03-09 19:09:25

ansaurus

tags:

views:

answers:

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

DEMO

related questions