显示更多/显示更少按钮不会显示所有隐藏的项目

Question

我在网页上有多个部分，默认情况下会显示3个相关的公园。如果与节主题相关联的公园超过3个，则显示更多/更少显示按钮将允许用户在列表上查看公园4的图像（但关联的许多公园）。这段代码可以在其他页面上完美运行（代码几乎完全相同，不同之处在于'participating_parks'变量。

在这里可能会引起一些混淆：当与该部分关联的图像有4张时，“显示更多”按钮将更改为显示更少，并且显示第4张图像，并且比原始图像小得多（不理想）。 我最大的问题：但是，如果有5张或更多图片，则会显示“显示更多”按钮，当单击该按钮时，它会显示更少的图片，但没有其他反应-其余图片不会显示显示。

摘要：：显示更多代码仅显示与该区域关联的第四个公园，但是如果关联的公园超过四个，则显示更多代码不起作用。

仅供参考：我正在使用ExpressionEngine 5.4。

这是我的代码：

{exp:channel:entries url_title="{embed:park_url}" dynamic="no"}

    {if participating_parks}

      <h4>Parks with {title}:</h4>
        <div class="row">
          {participating_parks orderby="title" sort="asc"}
          {if participating_parks:count == 4}
              <div class="collapse row mx-0" id="collapse-{embed:park_url}-{participating_parks:url_title}">
          {/if}

            <div class="col-12 col-sm-6 col-lg-4 mb-3">
              <a href="{site_url}parks/{participating_parks:url_title}">
                <img class="flex-fix lazyload" src="{site_url}assets/images/hero-images/{participating_parks:url_title}.jpg" width="100%" />
              </a>
            </div>
                {if participating_parks:count == participating_parks:total_results}
                {if participating_parks:total_results > 3}</div>{/if}

      </div>
        <div class="row mx-auto mb-4">
          {if participating_parks:total_results > 3}
            <button class="btn btn-primary mx-0" id="showMoreButton" type="button" data-toggle="collapse" data-target="#collapse-{embed:park_url}-{participating_parks:url_title}" aria-expanded="false" aria-controls="collapseExample" onclick="showParks(this)">SHOW MORE</button>
          {/if}
            <script>
                      var status = "less";
                      function showParks(e) {      
                      if (e.innerText == "SHOW MORE") {
                              e.innerText = "SHOW LESS";
                              status = "more";
                          } else if (e.innerText == "SHOW LESS") {
                              e.innerText = "SHOW MORE";
                              status = "less";
                          }
                      }
                      </script>
            </div>
        {/if}

        {/participating_parks}
    {/if}

{/exp:channel:entries}

以下是较小图像的图像：

谢谢大家！