Load More

The Code

{# load-more.twig #}

{% set limit = limit ?? 5 %}
{% set offset = offset ?? 0 %}

{% set entries = craft.entries().limit(limit).orderBy('title asc').all() %}

<div id="entries">
	{% for entry in entries %}
		<h3>{{ entry.title }}</h3>
	{% endfor %}
</div>

{{ include('_partials/load-more-button.twig') }}

{# _partials/load-more-button.twig #}

<button id="load-more-button"
	data-on-click="{{ datastar.get('_partials/load-more', {offset: offset + limit}) }}"
>
	Load More
</button>

{# _partials/load-more.twig #}

{% set limit = limit ?? 5 %}
{% set offset = offset ?? 0 %}

{% set entryQuery = craft.entries() %}
{% set totalEntryCount = entryQuery.count() %}
{% set entries = entryQuery.limit(limit).offset(offset).orderBy('title asc').all() %}

{% patchelements with {selector: '#entries', mode: 'append'} %}
	{% for entry in entries %}
		<h3>{{ entry.title }}</h3>
	{% endfor %}
{% endpatchelements %}

{% if totalEntryCount > limit + offset %}
	{% patchelements %}
		{{ include('_partials/load-more-button.twig') }}
	{% endpatchelements %}
{% else %}
	{% removeelements '#load-more-button' %}
{% endif %}