Jquery, hide & show list items after nth item

Question

Say I have an unordered list, like so:

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

How would I, using JQuery, hide the last 2 list items and have a 'show more' link there, so when clicked upon, the last 2 list items would appear?

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li style="display:none;">Four</li>
   <li style="display:none;">Five</li>
   <li>Show More</li>
</ul>

Mcginty

Answer 1

Try the following code example:

$('ul li:gt(3)').hide();
$('.show_button').click(function() {
    $('ul li:gt(3)').show();
});

Freighter

Answer 2

For fun, here's a roundabout way to do it in one chain:

$('ul')
  .find('li:gt(3)')
  .hide()
  .end()
  .append(
    $('<li>Show More...</li>').click( function(){
      $(this).siblings(':hidden').show().end().remove();
    })
);

Numbing

nice. I was trying the same for myself. I'm typing on a mobile though so can't test but like your approach as well. – Maltzman

your siblings(':hidden') approach is a nice one – Freighter

This is cool, but can you add to it so that it shows a 'show less' li after it's been opened please. – Brianabriand

Answer 3

I only wanted to show the "show/hide" if greater than max, so I did this, following Ken:

$('ul').each(function(){
  var max = 6
  if ($(this).find("li").length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
      .append(
        $('<li>More...</li>').click( function(){
          $(this).siblings(':hidden').show().end().remove();
        })
    );
  }
});

Reginiaregiomontanus

Answer 4

It would be more like this. You would have to hide the children greater than 2, because Three is indexed as 2. Also, if you wanted to put the Show More in an LI tag, you would need to include :not(:last-child) in your selector. Like so:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a href=# class=show>Show More</a></li>
</ul>
<script>$("li:gt(2):not(:last-child)").hide();
$('.show').click(function(){
$("li:gt(2)").show();
});
</script>

Treat

ridiculous that I got voted down. My code is right. The accepted answer has gt(4), which isn't correct in the context. I felt my answer was more correct and more thorough. – Treat

Answer 5

You can try the Show First N Items jQuery Plugin. All you need to write is this:

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

It will automatically convert to this:

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: none;">Four</li>
    <li style="display: none;">Five</li>
</ul>

And after clicking Show More, it will convert to this:

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li style="display: none;"><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: list-item;">Four</li>
    <li style="display: list-item;">Five</li>
</ul>

Fyi, I contributed code to this plugin.

Impassioned

Why the download without the comment, The poster took the time to provide a solution with examples and posted a disclaimer to the project. – Abstergent

Answer 6

Following Ken and Cloud, I added provision for the "More" button to turn to "Less" and toggle the relevant list items.

$('.nav_accordian').each(function(){
    var max = 6
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();
            if ( $('.show_more').length ) {
                $(this).html('<span class="show_less">(see less)</span>');
            } else {
                $(this).html('<span class="show_more">(see more)</span>');
            };
        });
    };
});

Dionysiac

Answer 7

I'm assuming that you are starting with the UL as per your example code.

I would find the UL and hide items greater than the index of the last item you'd like to initially display. Then I would add a new item to act as a hook for displaying the rest. Finally, I'd hide the show more option as it was no longer needed.

See the following:

$('ul li:gt(3)')
.hide()
.parent()
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>');

Maltzman