Repeater item: Add ID to first repeater item

[UUC]

Hi,

As the title says, how can I give only the first repeater item a specified id="defaultOpen"?

The code below, gives all buttons the same id but I only need it for the first one.

<div class="tab">
  {% for item in module.field_group %}
    <button class="tablinks" onclick="openTab(event, '{{ item.tab_id }}')" id="defaultOpen">{% inline_rich_text field="wysiwyg" value="{{ item.wysiwyg }}" %}</button>
  {% endfor %}
</div>

<div class="features-tabs-content">
  {% for item in module.field_group %}
    <div id="{{ item.content_id }}" class="tabcontent">
      {% inline_rich_text field="wysiwyg_copy" value="{{ item.wysiwyg_copy }}" %}
    </div>
  {% endfor %}
</div>

Regards

Umut

[Indra · Accepted solution]

Hi @UUC,

Since your using the repeater functionality you can use the loop properties to get the index of an item.

Most common use is to the index. 

{{ loop.index }}

So your could be like:

{% for row in rows %}
  <div class="tabcontent" id="tabcontent_{{ loop.index }}">{{ row.content }}</div>
{% endfor %}

If you want to add the custom module multiple times on a page, you can add the module id by adding {{ name }}. So your code will be something like:

{% for row in rows %}
  <div class="tabcontent" id="tabcontent_{{ loop.index }}_{{ name }}">{{ row.content }}</div>
{% endfor %}

If you want to add a class to the first item your code will be something like:

{% for row in rows %}
  <div class="tabcontent {% if loop.index == '1' %}tabcontent--first{% endif %}" id="tabcontent_{{ loop.index }}">{{ row.content }}</div>
{% endfor %}

An alternative for loop.index == '1' you can also use loop.first if you only want to add it to the first item.

Hope this helps your and awnsers your question.