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);
}
