<p>An efficient way is the other answer using the element api and vue.js. The element api returns JSON and VUE uses javascript templating to output the markup.  The same can be done in jQuery using a template framework like Mustache. However if you need something less in-depth with jQuery here is a simple way to accomplish it. 
First in your settings go to Routes and create a new route to the template file which will generate your posts.<br>
<a href="https://i.sstatic.net/PRr1Y.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/PRr1Y.png" alt="enter image description here"></a></p>

<p>For the more button you could use a data attribute to capture the current page along with how many you would like to load at a time. </p>

<pre><code>&lt;button id="more-button" data-page="0" data-batch="3"&gt;More&lt;/button&gt;
</code></pre>

<p>In jQuery listen for the button click and run your query to the template. </p>

<pre><code>$("#more-button").on('click', function () {
    var btn = $(this),
        page = btn.data('page'),
        batch = btn.data('batch'),
        offset = page * batch,
        newPage = page + 1;

    loadPosts(offset, batch);
    // set the buttons page attribute to the new page it is on.
    btn.data('page',newPage);
});

function loadPosts (offset, limit) {
    $.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
        var postOutput = $('#post-output');
        postOutput.html(data);
    });
}
</code></pre>

<p>In your template you will need to capture the offset &amp; limit params. </p>

<pre><code>{% set offset = craft.request.getParam('offset') %}
{% set limit = craft.request.getParam('limit') %}
{% set items = craft.entries.section('projects').limit(limit).offset(offset) %}
</code></pre>

<p>In this example we are retrieving the next set and appending them to the rest of the posts.
Again for a more efficient experience try using element api &amp; javascript templating. </p>

CC BY-SA 3.0
2017-01-06T17:37:48.097Z
2017-01-06T17:37:48.097Z
a-am
<p>This post by Andrew Welch includes a pretty comprehensive example of a "load more" function to dyamically load entries from the Element API: <a href="https://nystudio107.com/blog/lazy-loading-with-the-element-api-vuejs" rel="nofollow noreferrer">https://nystudio107.com/blog/lazy-loading-with-the-element-api-vuejs</a></p>

CC BY-SA 3.0
2017-01-03T05:50:33.197Z
2017-01-03T05:50:33.197Z
Dalton Rooney
<p>You will have to accomplish this without pagination. This is a non-javascript way.</p>

<pre><code>{% set page = craft.request.getParam('page') ? craft.request.getParam('page')|number_format : 1 %}
{% set batch = 3 %}
{% set limit = page * batch %}
{% set newPage = page + 1 %}

{% set items = craft.entries.section('projects').limit(limit) %}

{% for item in items %}
    &lt;h2&gt;{{ item.title }}&lt;/h2&gt;
    {# other markup for each item #}
{% endfor %}


&lt;a href="?page={{ newPage }}"&gt;More&lt;/a&gt;
</code></pre>

<p>This just increases the limit by the page number and the factor of <em>BATCH</em> while providing the next page number for the button url.</p>

CC BY-SA 3.0
2016-12-23T11:07:00.230Z
Okay so how would I implement this inside my page? I mean, how do I specify the content markup?
Christian Lemmers
CC BY-SA 3.0
2016-12-23T16:28:27.153Z
What is the section's handle you are trying to output?
a-am
CC BY-SA 3.0
2017-01-02T14:45:50.107Z
Section handle will be 'projects'.
Christian Lemmers
CC BY-SA 3.0
2017-01-03T04:01:10.413Z
I have updated the answer to show you how you add the content markup.  Basically you loop through the items from projects and output the attributes in any html markup.
a-am
CC BY-SA 3.0
2017-01-04T10:13:57.440Z
Thanks! This works! How can I do this without the whole page refreshing? I've added some jquery to maintain the scroll position but this doesn't give the desired effect.
Christian Lemmers
CC BY-SA 3.0
2016-12-15T21:03:45.783Z
2017-01-03T03:59:46.117Z
2017-01-03T03:59:46.117Z
a-am
<blockquote>
  <p>If someone wants to hide load more and load more button is outside the loop</p>
</blockquote>

<pre><code>{# set gloabl var so that can use them outside the loop #}
{% set page = 0 %}
{% set totalPage = 0 %}

 {% set page = craft.request.getParam('page') ? craft.request.getParam('page')|number_format : 1 %}
{% set batch = 6 %}
{% set limit = page * batch %}
{% set newPage = page + 1 %}


{% set items = craft.entries.section('properties').limit(limit) %}
{% for entry in items %}

{# show your data #}
&lt;div class="item"&gt;
    ...
&lt;/div&gt;

{# get total page #}
{% set totalPage = loop.length / batch %}

{% endfor %}

{# outside for loop and hide if we are on last page #}

{% if page|number_format != totalPage|number_format %}

    &lt;div class="center"&gt;
        &lt;a href="?page={{ newPage }}" class="btn btn-primary"&gt;Load More&lt;/a&gt;
    &lt;/div&gt;
{% endif %}
</code></pre>

CC BY-SA 4.0
2019-04-17T10:00:44.827Z
2019-04-17T10:00:44.827Z
inrsaurabh
<p>So, I'm kinda new to Craft so there might be a easy trick to do this but I can't seem to get it working (even with some heavy googling).</p>

<p>On the homepage I've got three entries (from the Projects page) loaded and I'd like to load +3 more entries everytime a 'load more' button is clicked. I've already figured out the best way to do this is using the <code>{% paginate %}</code> function limited to 3 entries but thats where I'm kinda stuck right now..</p>

<p>Is there a way to change the limit on click or something better?</p>

<entries>
Show more entries on click
# Show more entries on click

(Asked by: username_0 on 2016-12-15)

So, I'm kinda new to Craft so there might be a easy trick to do this but I can't seem to get it working (even with some heavy googling).

On the homepage I've got three entries (from the Projects page) loaded and I'd like to load +3 more entries everytime a 'load more' button is clicked. I've already figured out the best way to do this is using the `{% paginate %}` function limited to 3 entries but thats where I'm kinda stuck right now..

Is there a way to change the limit on click or something better?

**Tags:** entries

---

## 4 answers

### Answer by username_1 on 2017-01-06. Score: 2

An efficient way is the other answer using the element api and vue.js. The element api returns JSON and VUE uses javascript templating to output the markup.  The same can be done in jQuery using a template framework like Mustache. However if you need something less in-depth with jQuery here is a simple way to accomplish it. 
First in your settings go to Routes and create a new route to the template file which will generate your posts.

For the more button you could use a data attribute to capture the current page along with how many you would like to load at a time. 
More

In jQuery listen for the button click and run your query to the template. 
$("#more-button").on('click', function () {
    var btn = $(this),
        page = btn.data('page'),
        batch = btn.data('batch'),
        offset = page * batch,
        newPage = page + 1;

    loadPosts(offset, batch);
    // set the buttons page attribute to the new page it is on.
    btn.data('page',newPage);
});

function loadPosts (offset, limit) {
    $.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
        var postOutput = $('#post-output');
        postOutput.html(data);
    });
}

In your template you will need to capture the offset & limit params. 
{% set offset = craft.request.getParam('offset') %}
{% set limit = craft.request.getParam('limit') %}
{% set items = craft.entries.section('projects').limit(limit).offset(offset) %}

In this example we are retrieving the next set and appending them to the rest of the posts.
Again for a more efficient experience try using element api & javascript templating.


---

### Answer by username_2 on 2017-01-03. Score: 2

This post by Andrew Welch includes a pretty comprehensive example of a "load more" function to dyamically load entries from the Element API: <https://nystudio107.com/blog/lazy-loading-with-the-element-api-vuejs>


---

### Answer by username_1 on 2016-12-15. Score: 2

You will have to accomplish this without pagination. This is a non-javascript way.
{% set page = craft.request.getParam('page') ? craft.request.getParam('page')|number_format : 1 %}
{% set batch = 3 %}
{% set limit = page * batch %}
{% set newPage = page + 1 %}

{% set items = craft.entries.section('projects').limit(limit) %}

{% for item in items %}
    {{ item.title }}
    {# other markup for each item #}
{% endfor %}


More

This just increases the limit by the page number and the factor of BATCH while providing the next page number for the button url.

> **Comments:**
> **username_0**: Okay so how would I implement this inside my page? I mean, how do I specify the content markup?  
> **username_1**: What is the section's handle you are trying to output?  
> **username_0**: Section handle will be 'projects'.  
> **username_1**: I have updated the answer to show you how you add the content markup.  Basically you loop through the items from projects and output the attributes in any html markup.  
> **username_0**: Thanks! This works! How can I do this without the whole page refreshing? I've added some jquery to maintain the scroll position but this doesn't give the desired effect.  

---

### Answer by username_3 on 2019-04-17. Score: 1

If someone wants to hide load more and load more button is outside the loop

{# set gloabl var so that can use them outside the loop #}
{% set page = 0 %}
{% set totalPage = 0 %}

 {% set page = craft.request.getParam('page') ? craft.request.getParam('page')|number_format : 1 %}
{% set batch = 6 %}
{% set limit = page * batch %}
{% set newPage = page + 1 %}


{% set items = craft.entries.section('properties').limit(limit) %}
{% for entry in items %}

{# show your data #}

    ...


{# get total page #}
{% set totalPage = loop.length / batch %}

{% endfor %}

{# outside for loop and hide if we are on last page #}

{% if page|number_format != totalPage|number_format %}

    
        Load More
    
{% endif %}


---

