Sprig "View Less" Button

Question

I'm trying to build off the "Load More" button, and essentially "Load Less" by reverting back to the initial state. The code below resets it back to 0 and just starts load from the first item again, instead of resetting back to just displaying 1. I'm a bit stuck on how to work it other than just visibility:hidden on the divs that have loaded in.

{# Sets a default value if not defined by the `s-val:*` attribute on the button #}
{% set offset = offset ?? 0 %}
{% set entry = craft.entries.id(entryId).one() %}
{% set totalImages = entry.supplierImages.count() %}
{% set imagesQuery = entry.supplierImages.offset(offset).limit(limit) %}
{% set supplierImages = imagesQuery.all() %}

          {% for image in supplierImages %}
                <div class="col">
                  <div class="card bg-blue border-0 h-100 rounded-0 position-relative overflow-hidden">
                    <a href="{{ image.getUrl('largeImage') }}" data-lightbox="{{ entry.title }}" data-title="{{ image.title }}">
                      <img src="{{ image.getUrl('gridImage') }}" class="card-img-top rounded-0" height="250" alt="{{ image.title }}">
                    </a>
                    <div class="card-hover-caption bg-blue text-white position-absolute p-3 text-center">
                        <h6 class="mb-0">{{ image.title }}</h6>
                    </div>
                  </div>
                </div>
          {% endfor %}

{% set isAllDisplayed = totalImages <= offset + supplierImages|length %}
{% set buttonText = isAllDisplayed ? "Show Less" : "Load More" %}
{% set newOffset = isAllDisplayed ? 0 : (offset + limit) %}

{# Load More / Show Less Button #}
<button class="btn btn-md bg-transparent text-blue border-0 d-block m-auto my-4" 
        sprig 
        s-val:offset="{{ newOffset }}" 
        s-val:reset="{{ isAllDisplayed ? 'true' : 'false' }}"
        s-target="this" 
        s-swap="outerHTML">
    {{ buttonText }}
</button>