Different action to different Repeater List Item

Ask the community
,
1

Here is the case :
I have a repeater with 5 Items. Each Item has to 2 box elements - The top box (Box1) has an image and a title and the lower one (Box2) has a full description text.
When the page is loaded all Items show only Box1 and Box2 is collapsed.

I want that when a user click on Box1 of one of the Items, Box2 !!Only for this Item!!! will expand.

When I use the following code Box2 of all the items in the repeater Collapse\Expand
export function box1_click(event, $w) {
if ($w(‘#box2’).collapsed) {
$w(‘#box2’).expand();
} else {
$w(‘#box2’).collapse();
}
}

Is there a way to get the behavior I want with Repeaters ?

2

Hey
In this case you need to use the itemOnReady in the Repeater which loops through all items when the data is fully loaded. Inside this loop you need to put the onClick for this item to make them unique. There is sample on this in the WiX Code API Reference page for repeater.

3

Thanks Andreas.

Can’t say I fully understand the examples there, but I gave it a try.
The code I have written is below.

I get a warning in the editor - " ‘$w’ is already declared in the upper scope."
Although I see they do exactly the same in the example.

I get an error when I run it - “the element selector function (usually $w) can not be used before the page is ready”

$w(“#repeater1”).onItemReady(($w, itemData, index) => {

const repeatedImageBox = $w(“#box12”);
const repeatedTextBox = $w(“#box11”);

repeatedImageBox.onClick((event, $w) => {

if (repeatedTextBox.collapsed) {
repeatedTextBox.expand();
} else {
repeatedTextBox.collapse();
}
});

4

Ok, I looked around and I added - $w.onReady( function () {})
The error disappeared.

I still get a warning in the editor - " ‘$w’ is already declared in the upper scope."
Although I see they do exactly the same in the example.
Also, When I hover the Repeater - only the first item seems clickable and when I click the Box1 of ht first item Box2 doesn’t expand.

Now the code looks like it is below.

$w.onReady( function () {

$w("#repeater1").onItemReady(($w, itemData) => {

const repeatedImageBox = $w(“#box1”);
const repeatedTextBox = $w(“#box2”);

    repeatedImageBox.onClick((event, $w) => {

if (repeatedTextBox.collapsed) {
repeatedTextBox.expand();
} else {
repeatedTextBox.collapse();
}
});
});
})

5

Solved !!!

Finally managed to let repeater items collapse\expand individually.

Repeater.onItemReady() didn’t work for me.
What I finally did is $w.onReady() and $w.at()

That was the solution :
$w.onReady( function () {
$w(“#image9”).onClick((event, $w) => {
let $item = $w.at(event.context)
const repeatedBox = $item(“#box11”);
if (repeatedBox.collapsed) {
repeatedBox.expand();
} else {
repeatedBox.collapse();
}
});
})