“Zebra” Repeater with multi-state box

1. From the Add panel, open the Quick Add tab and add a Repeater to your main section. Stretch it so that it takes up the entire width and height of the section.

2. Choose the List layout from the dropdown menu in the floating action bar.

3. Add an item to the repeater so that you have at least 4 items in total.

4. Turn on Dev Mode. From the Add panel, under Layout Tools, add a Multi-State Box to an item. Select the multi-state box and set the width to 100%.

5. Inside the multi-state box, create a 2x1 grid. 

6. To set up the first state of the multi-state box, add text and images to each column.

7. From the Layers panel, select the multi-state box and click Manage States. 

8. Edit the ID of the first state and name it ‘even’. Then, click the 3 dots on the right, choose Duplicate State and rename it ‘odd’.

9. Set up the second state of the multi-state box. To make sure you’re working on the second state, use the Layers panel.

10. Switch around and place the elements in the opposite column.

11.  Open the built-in IDE and paste the following code:

   $w('#repeater1').forEachItem(($item, itemData, index) => {

       if (index % 2 === 0) {

           $item('#multiStateBox1').changeState("even");

       } else {

           $item('#multiStateBox1').changeState("odd");

       }

   })

});

12. Make sure the element IDs match the IDs in the code. 

13. Preview the result. The elements will appear on opposite sides in each item.

Notes:

To add dynamic content to each item in the repeater, use the Content Manager. Create a content collection, fill in the relevant fields, and add text and images for each item. Then connect it to your Repeater by creating a dataset. For more information on how to use the CMS, check out this tutorial in Academy X.  

**If you decide to populate the repeater using a database, then use the onItemReady() function in the code instead of the forEachItem() function.