[SOLVED] Hiding and showing <li> tags
Hi all
I have an application, that will pull all articles associated with a user on a page.
As some users have posted approx 100 articles, I want to hide all but the first 5, then have a link that will show the next 5 or the remaining article that are hidden (if less than 5)
I have the following code:
-
jQuery.noConflict();
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = jQuery('#list').find('li').length; // Total # rows
jQuery(document).ready(function(){
// 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;
if ( numShown >= numRows ) jQuery('#more').remove();
if ( numRows - numShown < numMore ) jQuery('#more span').html(numRows - numShown);
jQuery('#list').find('li:lt('+numShown+')').show();
})
})
<div id="test">
<h2>Articles</h2>
<ul id="list">
<li><a href=""></a>1</li>
<li><a href=""></a>2</li>
<li><a href=""></a>3</li>
<li><a href=""></a>4</li>
<li><a href=""></a>5</li>
<li><a href=""></a>6</li>
<li><a href=""></a>7</li>
<li><a href=""></a>8</li>
...................................
</ul>
</div>
Firebug tells me that the 6th-nth <li> is <li style="display:none">
The code above hides all but 5 and gives me a 'show 5 more' option. But after clicking on it, there is no other 'show 5 more' option, even though there are about another 30 rows that are being hidden.
Can someone help me with my code?
NB, I am also using Prototype in the application, thus the use of 'jQuery' rather than '$'.
All help is much appreciated