Hi,
I have this code that works well on a normal page for toggling expand and collapse of elements on a page when i click the view instructions button. it also shows and hides the arrows and the label name of the button.
However when i try and use it on a page that has repeaters it only works on the first repeater perfectly it doesn't work on the other 11 repeaters, I'm assuming it needs some kind of index?
function toggleFold(index) { let $fold = $w('#instructionText' + index); let $arrowDown = $w('#arrowDown' + index); let $arrowRight = $w('#arrowRight' + index); let $instructiontext = $w('#instructionButton' + index); // toggle the fold at the index if ($fold.collapsed) { $fold.expand(); $arrowDown.show(); $arrowRight.hide(); $instructiontext.label = "Close instructions"; } else { $fold.collapse(); $arrowDown.hide(); $arrowRight.show(); $instructiontext.label = "View instructions"; } // collapse the other folds [1,2,3,4,5,6,7,8,9,10,11,12] .filter(idx => idx !== index) .forEach(idx => { $w('#instructionText' + idx).collapse(); $w('#arrowDown' + idx).hide(); $w('#arrowRight' + idx).show(); }) } export function instructionButton1_click(event) { toggleFold(1); } export function instructionButton2_click(event) { toggleFold(2); } export function instructionButton3_click(event) { toggleFold(3); } export function instructionButton4_click(event) { toggleFold(4); } export function instructionButton5_click(event) { toggleFold(5); } export function instructionButton6_click(event) { toggleFold(6); } export function instructionButton7_click(event) { toggleFold(7); } export function instructionButton8_click(event) { toggleFold(8); } export function instructionButton9_click(event) { toggleFold(9); } export function instructionButton10_click(event) { toggleFold(10); } export function instructionButton11_click(event) { toggleFold(11); } export function instructionButton12_click(event) { toggleFold(12); }
![](https://static.wixstatic.com/media/a27d24_f2e0c95982474da99de33872d231dd61~mv2.png/v1/fill/w_980,h_613,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_f2e0c95982474da99de33872d231dd61~mv2.png)
Solved myself
function toggleFold(index) { let $fold = $w('#instructionText' + index); let $arrowDown = $w('#arrowDown' + index); let $arrowRight = $w('#arrowRight' + index); let $instructiontext = $w('#instructionButton' + index); // toggle the fold at the index if ($fold.collapsed) { $fold.expand(); $arrowDown.show(); $arrowRight.hide(); $instructiontext.label = "Close instructions"; } else { $fold.collapse(); $arrowDown.hide(); $arrowRight.show(); $instructiontext.label = "View instructions"; } // collapse the other folds [1,2,3,4,5,6,7,8,9,10,11,12] .filter(idx => idx !== index) .forEach(idx => { $w('#instructionText' + idx).collapse(); $w('#arrowDown' + idx).hide(); $w('#arrowRight' + idx).show(); }) } export function instructionButton1_click(event) { toggleFold(1); } export function instructionButton2_click(event) { toggleFold(2); } export function instructionButton3_click(event) { toggleFold(3); } export function instructionButton4_click(event) { toggleFold(4); } export function instructionButton5_click(event) { toggleFold(5); } export function instructionButton6_click(event) { toggleFold(6); } export function instructionButton7_click(event) { toggleFold(7); } export function instructionButton8_click(event) { toggleFold(8); } export function instructionButton9_click(event) { toggleFold(9); } export function instructionButton10_click(event) { toggleFold(10); } export function instructionButton11_click(event) { toggleFold(11); } export function instructionButton12_click(event) { toggleFold(12); }