Get the even rows of a repeater using loop.index

[jrstaton]

Trying to figure out how to get the even rows in a repeater. I've seen loop.index used to target specific rows but not for all the even or odd rows. Any help is appreciated. Thanks

[ChehakWadhdwa]

hey @jrstaton 

Instead of using loop.index it will be much better to use class or id by {{name}}

Like <div class="{{ name }}"> give this class in top of your repeater module and close div after repeater module and give your css like as shown in below image , you can define all your css like this then you can get ability to control each card module , no matter how many times you are using same module

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[jrstaton]

Thanks @ChehakWadhdwa - I think I should provide more information as I'm not understanding how your suggestion will accomplish what I'm trying to create.

I have a vertical animated timeline that reveals itself on page scroll. I want the repeater fields to alternate its starting animation either from the left or from the right. So what I need is for all the odd repeater fields to have the class "js--fadeInLeft" and all the even repeater fields to have the class "js--fadeInRight". Below is the code I'm using for reference:

    {% for item in module.timeline_item %}
      <div class="timeline-item">
        <div class="timeline-content {% if loop.index == '2' %}js--fadeInRight{% else %}js--fadeInLeft{% endif %}">
          <h5>{% inline_text field="timeline_title" value="{{ item.timeline_title }}" %}</h5>
          {% inline_rich_text field="timeline_content" value="{{ item.timeline_content }}" %}
        </div>
      </div>
    {% endfor %}

This module is for a client so I need to have them only editing the content of the repeater and not class names and stylesheets.

Thanks

[jrstaton · Accepted solution]

Got what I needed from the dev slack channel. For anyone that comes across this looking for the same thing, here's the code needed and a link to the docs - https://developers.hubspot.com/docs/cms/hubl/operators-and-expression-tests#even

{% if loop.index is even %}

[dennisedson]

Thanks for adding the solution here.

Sometimes, the answer is so darn simple you almost smack yourself in the head when you see it!