使用 Shopify 链接列表时单击时显示所有面板的手风琴表

Question

I have a sidebar menu setup that is looping through shopify linklists and outputting the parent and child collection titles and URLs. The problem is that when i click on one of the anchor tags, it opens all of the anchor links as the data-target and id are not unique. I have tried changing the div id to a random number using Mat.random() but cant make this work.

Here is the code

    {% for link in linklists[settings.mobile_linklist].links %}
    {% if link.links != blank %}
      <div class="nav-menu">
        <ul id="accordion">
          <li class="accordion">
            <span><a aria-controls="collapseOne"
               aria-expanded="false"
               class="collapsible"
               data-target="#collapseOne"
               data-toggle="collapse"
               href="#">{{ link.title }}
             </a></span>

            <div aria-labelledby="headingOne" class="collapse" id="collapseOne">
                <ul>
                  {% for childlink in link.links %}
                  <li>
                    <a href="{{childlink.url}}">{{childlink.title}}</a>
                  </li>
                  {% endfor %}
                </ul>
            </div>
          </li>

        </ul>
      </div>
    {% endif %}
    {% endfor %}

Answer 1

you can use the forloop.index to append unique value into a loop in Shopify liquid

{% for link in linklists[settings.mobile_linklist].links %}
    {% if link.links != blank %}
      <div class="nav-menu">
        <ul id="accordion-{{forloop.index}}">
          <li class="accordion">
            <span><a aria-controls="collapseOne"
               aria-expanded="false"
               class="collapsible"
               data-target="#collapse{{forloop.index}}"
               data-toggle="collapse"
               href="#">{{ link.title }}
             </a></span>

            <div aria-labelledby="headingOne" class="collapse" id="collapse{{forloop.index}}">
                <ul>
                  {% for childlink in link.links %}
                  <li>
                    <a href="{{childlink.url}}">{{childlink.title}}</a>
                  </li>
                  {% endfor %}
                </ul>
            </div>
          </li>
        </ul>
      </div>
    {% endif %}
    {% endfor %}

you read more about forloop here