How to Create a Repeater with a "Zebra" Layout Using the Multi-State Box

Show and tell
, ,
5

Oh I just figured it out! Guess it will work also with more items exactly like that. :grinning:

$w.onReady(function () {

    $w('#VCPortfolioRepeater').forEachItem(($item, itemData, index) => {
        const multiStateBox = $item('#PortfolioItemBox');

        // Determine the state based on the item's index
        const layoutIndex = index % 3;
        let stateName;

        switch (layoutIndex) {
        case 0:
            stateName = "Middle";
            break;
        case 1:
            stateName = "Bottom";
            break;
        case 2:
            stateName = "Top";
            break;
        default:
            console.error(`Unexpected layout index: ${layoutIndex}`);
            return;
        }

        // Change to the appropriate state
        multiStateBox.changeState(stateName)
            .then(() => console.log(`Item ${index} set to state: ${stateName}`))
            .catch(err => console.error(`Error changing state for item ${index}:`, err));

    });

});