Show/hide multiple <li>'s

wigglesby · December 18, 2009

Hi

I have a script that lists a lot of links within an-ordered list.

As the list will be different lengths for different pages (user profiles) I want to display the first 5 links, then have a button that when clicked, will then show the next 5 (including the first 5 - so a total of 10 links)

Is this possible?

wigglesby · December 21, 2009

Can anyone help me with this?

rajivgonsalves · December 21, 2009

Yes you can do this what is your code you have so far ?

wigglesby · December 21, 2009

I found an example using the following:

var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = $('table').find('tr').length; // Total # rows

$(document).ready(function(){
// Hide rows and add clickable div
$('table')
  .find('tr:gt(' + (numShown - 1) + ')').hide().end()
  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

$('#more').click(function(){
  numShown = numShown + numMore;
  // no more show more if done
  if ( numShown >= numRows ) $('#more').remove();
  // change rows remaining if less than increment
  if ( numRows - numShown < numMore ) $('#more span').html(numRows - numShown);
  $('table').find('tr:lt('+numShown+')').show();
})

})

But when clicking on the div 'Show More' the div disappears and no other results are displayed. They remain as style="display:none" in the HTML.

Thanks

rajivgonsalves · December 21, 2009

this will show a table rows it won't work on anything but tables what does your html code looks like ?

wigglesby · December 21, 2009

Sorry, I updated my code to include using <li>

	var numShown = 5; // Initial rows shown & index
	var numMore = 5; // Increment
	var numRows = jQuery('#test').find('li').length; // Total # rows

	jQuery(document).ready(function(){
	 // Hide rows and add clickable div
	 jQuery('#test')
	  .find('li:gt(' + (numShown - 1) + ')').hide().end()
	  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

	 jQuery('#more').click(function(){
	  numShown = numShown + numMore;
	  if ( numShown >= numRows ) jQuery('#more').remove();
	  if ( numRows - numShown < numMore ) $('#more span').html(numRows - numShown);
	  jQuery('info').find('tr:lt('+numShown+')').show();
	 })

	})

Well in firebug, it says the 6th -> nth <li> are style="display: none" but when i view the HTML source, there is no style attribute.

My code when viewing the source is:

<div id="test">
<h2>Articles Tagged by: arms</h2>
<ul id="list">
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test1">test1</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test2">test2</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test3">test3</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test4">test4</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test5">test5</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test6">test6</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test7">test7</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test8">test8</a></li>
<li><a href="/work/fitbritz_events_new/web/frontend_dev.php/test/test9">test9</a></li>
</ul>
</div>

rajivgonsalves · December 21, 2009

consider this code hope its helpful

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <script>
    var limit = 5;
    $(document).ready(function() {
        $('#morelink').click(function() {
            var counter = 0;
            $('#list > li').each(function() {
                if ($(this).is(':hidden')) {
                    $(this).show();
                    counter++;
                }
                if (counter == limit) {
                    return false;
                }
            });
        });
    });
  
  </script>
</HEAD>

<BODY>
  <ol id="list">
    <li>Node 1</li>
    <li>Node 2</li>
    <li>Node 3</li>
    <li>Node 4</li>
    <li>Node 5</li>
    <li style="display:none">Node 6</li>
    <li style="display:none">Node 7</li>
    <li style="display:none">Node 8</li>
    <li style="display:none">Node 9</li>
    <li style="display:none">Node 10</li>
    <li style="display:none">Node 11</li>
    <li style="display:none">Node 12</li>
    <li style="display:none">Node 13</li>
    <li style="display:none">Node 14</li>
    <li style="display:none">Node 15</li>
  </ol>
  <a id="morelink" href="javascript:;" />Next 5</a>
</BODY>
</HTML>

wigglesby · December 21, 2009

Hi thank for the example.

Unfortunately that doesnt work.

It just lists out all my <li> tags, rather than hiding the first 5.

I am pulling the <li> from a db in PHP, so I'm using a foreach(). So I cannot manually give the 6th -nth <li> attribute of style="display: none".

The example code I found worked well, just when clicking on the 'Show more' link, nothing happened....

Any more help would be much appreciated

wigglesby · December 21, 2009

Ok, I changed the code from a <ul><li> to using a table, like the code I gave. I can load the next 5 now, but the list has about 50 rows and after the first click, the 'Show more' link disappears.

rajivgonsalves · December 21, 2009

your variable defination the var variable part has to be in the document ready

rajivgonsalves · December 21, 2009

the following code does work but if you have 50 links it will show them and when the page loads it will hide the links after 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <script>
    var limit = 5;
    $(document).ready(function() {
        $('#morelink').click(function() {
            var counter = 0;
            $('#list > li').each(function() {
                if ($(this).is(':hidden')) {
                    $(this).show();
                    counter++;
                }
                if (counter == limit) {
                    return false;
                }
            });
        });

           $('#list > li').each(function(i) {
                if (i > 4) {
                    $(this).hide();
                }
           });
    });

  </script>
</HEAD>

<BODY>
  <ol id="list">
    <li>Node 1</li>
    <li>Node 2</li>
    <li>Node 3</li>
    <li>Node 4</li>
    <li>Node 5</li>
    <li>Node 6</li>
    <li>Node 7</li>
    <li>Node 8</li>
    <li>Node 9</li>
    <li>Node 10</li>
    <li>Node 11</li>
    <li>Node 12</li>
    <li>Node 13</li>
    <li>Node 14</li>
    <li>Node 15</li>
  </ol>
  <a id="morelink" href="javascript:;" />Next 5</a>
</BODY>
</HTML>

wigglesby · December 21, 2009

That works great!!

Is there anyway that if there are no more <li> to show, that the moreLink <a href> can be hidden?

Also my other concern is that, it will say 'next 5'. What If there are 8 <li>'s?

The link will say 'next 5' but only show 3 more....

Thanks

wigglesby · December 21, 2009

I managed to get it to work using the following:

jQuery(document).ready(function(){
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = jQuery('#list li').size(); // Total # rows
alert(numRows);
 // Hide rows and add clickable div
 jQuery('#list')
  .find('li:gt(' + (numShown - 1) + ')').hide().end()
  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

 jQuery('#more').click(function(){
  numShown = numShown + numMore;
  // no more show more if done
  if ( numShown >= numRows ) jQuery('#more').remove();
  // change rows remaining if less than increment
  if ( numRows - numShown < numMore ) jQuery('#more span').html(numRows - numShown);
  jQuery('#list').find('li:lt('+numShown+')').show();
 })

})

rajivgonsalves · December 21, 2009

I managed to get it to work using the following:

jQuery(document).ready(function(){
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = jQuery('#list li').size(); // Total # rows
alert(numRows);
 // Hide rows and add clickable div
 jQuery('#list')
  .find('li:gt(' + (numShown - 1) + ')').hide().end()
  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

 jQuery('#more').click(function(){
  numShown = numShown + numMore;
  // no more show more if done
  if ( numShown >= numRows ) jQuery('#more').remove();
  // change rows remaining if less than increment
  if ( numRows - numShown < numMore ) jQuery('#more span').html(numRows - numShown);
  jQuery('#list').find('li:lt('+numShown+')').show();
 })

})

Thats nice

Sign In

Show/hide multiple <li>'s

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information