Any idea why the toggle collapse not working ? (Not Solved)

tried as in the example for the first 4 boxs - thanks!

function toggleFold(index) {
let $fold = $w(‘#fold’ + 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]
.filter(idx => idx !== index)
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
$w(‘#arrowDown’ + idx).hide();
$w(‘#arrowRight’ + idx).show();
})
}

export function headerBox1_onClick(event) {
toggleFold(1);
}

export function headerBox2_onClick(event) {
toggleFold(2);
}

export function headerBox3_onClick(event) {
toggleFold(3);
}

export function headerBox4_onClick(event) {
toggleFold(4);
}

export function headerText1_onClick(event) {
toggleFold(1);
}

export function headerText2_onClick(event) {
toggleFold(2);
}

export function headerText3_onClick(event) {
toggleFold(3);
}

export function headerText4_onClick(event) {
toggleFold(4);
}

Try to take away dollarsigns on variables.

let fold = $w(‘#fold’ + index);

So i’ve managed to make it work but now i have hugh space between the items and the strip below in the live site. any way to fix this issue ?

Do you have more elements on the page that could make the whitespace? I can’t see you page by the url you posted.

no its just the space that filled in with the text itself when each item opened.

any idea??

current URL is : meditrend.co.il