https://www.wix.com/code/home/example/Collapse-Elements
I tried to implement this and have collapsible menus like this. I keep getting an error when I click on the text or the box but when I click on the arrow it works....? I keep double checking I have everything named and events made.... not sure what I am missing here.
EDIT: I redid the boxes and arrows so it reflects more of the example, however, now the boxes aren't collapsing when I open another box.
ERROR:
TypeError: $w(...).hide is not a function
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,5,6,7,8,9,10,11,12,13,14,15,16,17]
.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);
}
....these repeat to #17
Got it!! My very first box, the arrow was named incorrectly, I saw several others that had typo's as well as I redid the arrows to match the example. So that is why the error was so vague, it wasn't one line in the code, it was the elements themselves.