[Need Help T^T] How to give images in repeater a unique ID?

I’m having different images in a repeater but all of them have the same ID. What should I do in order to give all the images a unique ID?

Instead of using β€”> $w(β€˜#’)
using β€”> $item(β€˜#’)

1 Like

It said not defined when I use $item(β€˜#’)

Hi Clubpenguin,
What do you exactly try to do?

1 Like

In a repeater you can access elements by using $item(β€œ#YourElement”)
But you have to do it in a functon of the repeater.

Here is the reference API for the repeater.
https://www.wix.com/velo/reference/$w/repeater

1 Like

Hi Kristof, I was trying to do an effect where people collapse and expand image when they press on an arrow icon. However, I’m using a repeater and therefore all the image have the same ID. Therefore, when I click on the arrow, all the image will expand together.

I want to code it so that the image will expand individually. But, I couldn’t find a way to assign unique ID to all the images.

Below is my code:

@woontianruen
can you copy the code and past it here,
Its easyer to edit it for you.
I already can see where the problem is.
if you follow the reference API you can see where the problem lies.
But if its your first time with a repeater its not that easy :slight_smile:

kind regards,
kristof.

sure, gimme a sec. Thank you so much!!!

function toggleFold(index) {
let $fold = $w( β€˜#image’ + index);
let $arrowDown = $w( β€˜#arrowDown’ + index);
let $arrowRight = $w( β€˜#arrowRight’ + index);

// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 ]
.filter(idx => idx !== index)
.forEach(idx => {
$w( β€˜#image’ + idx).collapse();
$w( β€˜#arrowDown’ + idx).hide();
$w( β€˜#arrowRight’ + idx).show();
})
}

export function arrowRight1_click(event) {
toggleFold( 1 )
}

export function arrowDown1_click(event) {
toggleFold( 1 )
}

Its gone take a few minutes,
But i’ll make a small tutorial for it.

I’ll post it here when i’m ready

1 Like

sure take you time, thanks a lot Kristof. Really appreciate it :slight_smile:

https://volkaertskristof.wixsite.com/helpcenter/aeir

Check out my tutorial here.

Kind regards,
Kristof.

1 Like

Hi Kristof, I follow exactly the code except the ID but it still doesn’t work. I have no idea where went wrong. :sob:

This is my code:

function accessElements(){
$w( β€œ#repeater1” ).forEachItem(($item,itemData,index) => {
const image = $item( β€œ#image1” )
image.onClick((event) => {
})

const button = $item( β€œ#arrowDown1” )
button.onClick((event) => {
if ($item( β€œ#image1” ).collapsed()) {
$w( β€œ#image1” ).expand();
} else {
$w( β€œ#image1” ).collapse();
}
})

}) 

}

Do I need to do anything about the right side of the code panel where I circled?

The problem lies here i think
if ($item( " #image1 " ).collapsed()) { $w( " #image1 " ).expand(); } else {
$w( " #image1 " ).collapse();

It has to be $item(β€œ#image1”) instead of $w :slight_smile:
Otherwhise you are collapsing expanding all the images in the repeater

Still doesn’t work T^T

Whats your repeater name?

And are the images all collapsing/expanding?

Oow my bad in my tutorial i forgot to say the function has to be used in the $w.omReady() of the page my bad :stuck_out_tongue:

1 Like