I have a list of data on a page, a simple ordered list of around 100 items, just a title and excerpt like on an archive page.
On page load, I want to hide all but the first 25 items with an option to load 25 more, 25 more until they're all visible.
I've looked into simple pagination plugins like jPaginate but would simply like the list to expand by 25 every time.
Just curious of your thoughts - thanks!
Share a common class among all your items and use jQuery to show more elements each time.
<div class="listitem">list item 1</div>
<div class="listitem">list item 2</div>
<div class="listitem">list item 3</div>
<div class="listitem">list item 4</div>
<div class="listitem">list item 5</div>
<div class="listitem">list item 6</div>
<div class="listitem">list item 7</div>
<div class="listitem">list item 8</div>
<div class="listitem">list item 9</div>
<div class="more">showmore</div>
** the jquery **
$(".listitem").hide();
$(".listitem").slice(0, 2).show();
$(".more").click(function(){
var showing = $(".listitem:visible").length;
$(".listitem").slice(showing - 1, showing + 2).show();
});
For your reference: http://api.jquery.com/slice/
Edit: Here's a jsFiddle showing this in action... http://jsfiddle.net/uQWGB/1/
removeClass('listitem') for this to work more than once, and in response to clicking something.hide() on all the elements every time, adding/removing classes or data- attributes would probably be more efficient and less buggy on a real site (or wrapping each 5 elements in another div) - but I already upvoted your post as much as I could because this does work and didn't deserve a DV.Create 4 DIVs and put 25 items into each one. Make the first visible and hide the other 3. Create a variable and set it to1, and create 2 links for paginating back and forward.
The logic would be simple: pressing any of the pagination links would check the local variable and make sure that after an increase or decrease it would still be valid, so 1,2,3 or 4. The you call your render function.
Your render function would do nothing else except hiding 3 divs of the 4, showing the one selected and disable the pagination links if needed.
For the expandable list create 1 show more link instead of the 2 paginarion links.
Your render function would in this case never hide a div, just show another one. When all 4 divs would be enabled then the show more link has to be hidden.
Hope this helps.
Wrap chunks of your stuff in a DIV with style="display:none" and a class="hiddenMore" (or something).
<a href="javascript://" onclick="showMore(this)">more...</a>
function showMore(e) {
$('.hiddenMore').eq(0).show()
$(e).removeClass('hiddenMore')
}
