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(‘#’)
It said not defined when I use $item(‘#’)
Hi Clubpenguin,
What do you exactly try to do?
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
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 
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
sure take you time, thanks a lot Kristof. Really appreciate it
https://volkaertskristof.wixsite.com/helpcenter/aeir
Check out my tutorial here.
Kind regards,
Kristof.
Hi Kristof, I follow exactly the code except the ID but it still doesn’t work. I have no idea where went wrong. 
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();
}
})
})
}
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 
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 