Client side WordPress "Load More" plugin without AJAX calls or WordPress requests
I have over 100 li
items per page. I want to display the first 5 li
items and a Load More button. When I clicked the Load More button, it displays the next five records, and the Load More button is disabled if there are no more records on the page li
. I don't want to use any ajax call and no WordPress request is required.
<ul class="paging-example">
foreach ($resultset as $idx => $row)
{
if($row->Type == '1')
{
echo "<li><a href='#'>" . $row->Title . "</a></li>";
}
}
echo '</ul>';
source to share
Okay, well sticking to the way you said you wanted to do this, having 100 list items but only showing the first five and then showing more when you click Load More:
First of all, in your php:
echo '<ul class="paging-example">';
$counter = 0;
foreach ($resultset as $idx => $row)
{
if( $row->Type == '1' )
{
echo "<li style='" . ( $counter >= 5 ? 'display: none;' : '' ) . "'><a href='#'>" . $row->Title . "</a></li>";
$counter++;
}
}
echo '</ul>';
Next for your javascript, I am assuming jQuery is ok since you are working with Wordpress? I'm also going to assume that the "load more" button has a "load_more" class.
(function($){
$('body').on('click','.load_more',function(e){
e.preventDefault();
$('.paging-example li:hidden:lt(5)').slideDown();
});
})(jQuery);
I did slideDown because I like to have some kind of animation, you can optionally do it element by element or just display them all at once using .show () instead.
I used the $ ('body') method. on () also just in case the add more button is added dynamically or something.
So to explain that in php I just added it: none for all elements after the fifth.
Then jquery just selects the first five invisible elements and shows them.
You can also do a for loop and display the first five elements that way, but I went for the easiest way I could think of.
If you need to include jquery, you can add:
to your file, but it's WordPress, so I recommend using wp_enqueue_script, something like wp_enqueue_script ('JQuery'); in the appropriate hook.
Hope this helps, I can give you the original javascript way, if you'd rather avoid jQuery, it's a little longer.
My complete test (outside of WordPress and nothing on the page really) looked like this to make sure I didn't give you broken code:
<?php
echo '<ul class="paging-example">';
for( $x = 0; $x < 100; $x++ )
{
echo '<li style="' . ( $x >= 5 ? 'display: none;' : '' ) . '">stuff</li>';
}
echo '</ul>';
?>
<button class="load_more">Load More</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$('body').on('click','.load_more',function(e){
e.preventDefault();
$('.paging-example li:hidden:lt(5)').slideDown();
});
})(jQuery);
</script>
source to share