Shopify liquid如何隐藏缺货产品，直到点击收集页面的元素？

我如何制作一个元素来隐藏库存项目下的“缺货项目”，如果有人单击按钮，它将打开这些项目

我添加了一张照片，例如：

---

您需要在一个集合中遍历可用和缺货的产品。 以下是示例液体代码：

<div id="div1">
// Display all in stock products 
{% for product in collection.products %}
        {% if product.available %}
          {% include 'product-grid-item' %}          
        {% endif %}
{% endfor %}
</div>
<div id="div2">
// Display all out of stock products
{% for product in collection.products %}
        {% unless product.available %}
            {% include 'product-grid-item' %}
        {% endunless %}
{% endfor %}
</div>

//显示所有库存产品
{%用于集合中的产品。产品%}
{%if product.available%}
{%include'产品网格项“%”
{%endif%}
{%endfor%}
//显示所有缺货产品
{%用于集合中的产品。产品%}
{%product.available%}
{%include'产品网格项“%”
{%end除非%}
{%endfor%}

您可以使用SimpleJS在单击按钮时为div2提供展开-折叠效果

注意：您可以通过使用单个迭代并在两个变量中存储两个div来进一步优化此代码