In this lesson, you will learn how to use your Wix CMS data to control different layouts in your Wix Repeaters.
Before you add the code to your website, watch our video to show you how to set up your website correctly:
Now that you have set up your website, here is the code used in the video:
$w.onReady(function () { $w('#dataset1').onReady(() => { $w('#repeater1').onItemReady(($item, itemData) => { let even = itemData.order; if (even % 2 == 0) { $item('#v2').show(); $item('#v2').expand(); $item('#v1').hide(); $item('#v1').collapse(); } else { $item('#v1').show(); $item('#v1').expand(); $item('#v2').hide(); $item('#v2').collapse(); } }) }) });
In order for this to work on your website, make sure you name your page elements to match the code OR rename the elements in the code to match the names you've given elements on your page. You may need to change for "database1", "repeater1", "order" (field key from database), "v1", and "v2". Once you change the name of the elements (or code), this method will work on your website!
Have fun!