I have a feature that allows users to upload multiple images. The images are displayed via simple light box. The issue is it displays all of the images and forces users to scroll all the way to the bottom to see the rest of the data. If lots of images are uploaded this can be annoying on small screens. I want to implement a show more button something like this and or just a simple button.

code:

{% if postgallery|length >= 1 %}
    <a class="imggallery-title">Image Gallery</a>
    <div class="row">
        {% for images in postgallery %}
        <div class="col-md-3">
            <a href="{{ images.images.url }}" data-lightbox="image-1">
                <img class="img-thumbnail" src="{{ images.images.url }}" />
            </a>
        </div>
        {% endfor %}
    </div>
    {% endif %}

view:

postgallery = PostImages.objects.filter(post_id=post) 

I understand I could setup and if statement to check to see if there are more than a set amount of posts but im not sure how I would handle the displaying of the rest with a button click