Repeater Animation Code Help

Ask the community
,
1

Hello, I’m trying to get a smooth fade in and fade out working for a repeater of projects I have. However, it keeps on giving me the error “toggleFold is not defined” Does anyone know what I’m doing wrong?

export function repeater1_itemReady($item, itemData, index) {
	function toggleFold() {
	let $fold = $w('#testingblock' + index);
	let $arrowDown = $w('#arrowDown' + index);
	let $arrowRight = $w('#arrowRight' + index);
	// toggle the fold at the index
	if ($fold.hidden) {
		$fold.show("fade", {duration:100});
		$arrowDown.show("fade", {duration:100});
		$arrowRight.show("fade", {duration:100});
	}
	else {
		$fold.hide("fade", {duration:100});
		$arrowDown.hide("fade", {duration:100});
		$arrowRight.hide("fade", {duration:100});
	}
}
export function headerBox1_mouseIn(event) {
	toggleFold(1);
}
export function headerBox1_mouseOut_1(event) {
	toggleFold(1);
}
2

You defined the toggleFold() function inside the repeater.onItemReady function, so you can’t approach it from outside the itemOnready scope.

3
  • if they are repeater elements, you should use $item and not $w when you declare $fold etc…
4

But if I put $item it says that its undefined… Sorry I’m not very good with coding so I’m having trouble making this work OTL.

5

I was editing this code for the animations, and although I got it to work it wont work inside a repeater https://www.wix.com/corvid/example/collapse-elements

6

Delete this part:

export function headerBox1_mouseIn(event) {
	toggleFold(1);
}
export function headerBox1_mouseOut_1(event) {
	toggleFold(1);
}

Instead put inside the repeater1_itemReady:

$item("#headrbox1").onMouseIn((event) => {
toggleFold(1);
})
$item("#headrbox1").onMouseOut((event) => {
toggleFold(1);
})
7
  • replace the other $w inside the onItemReady and make them $item
8

Hi, I did what u suggested and this was my result… It still doesn’t seem to be working. I tried to see what was wrong but even then its not even detecting the hover on the headerbox. Do you know what might be wrong?

function toggleFold(index) {
        console.log("toggleFolding");
 let $fold = $w('#testingblock' + index);
 let $arrowDown = $w('#arrowDown' + index);
 let $arrowRight = $w('#arrowRight' + index);
 // toggle the fold at the index
 if ($fold.hidden) {
        $fold.show("fade", {duration:100});
        $arrowDown.show("fade", {duration:100});
        $arrowRight.show("fade", {duration:100});
    }
 else {
        $fold.hide("fade", {duration:100});
        $arrowDown.hide("fade", {duration:100});
        $arrowRight.hide("fade", {duration:100});
    }
    [1,2,3,4]
        .filter(idx => idx !== index)
        .forEach(idx => {
        })
}

/////////////////////////////////////////

export function repeater1_itemReady($item, itemData, index) {
 console.log("event");
$item("#headerBox1").onMouseIn((event) => {
    console.log("MouseIn");
toggleFold(1);
})
$item("#headerBox1").onMouseOut((event) => {
toggleFold(1);
})
}