Hello everyone! i have just been introduced to code and i am trying to make a collapsable menu using this wix tutorial https://www.wix.com/code/home/example/Collapse-Elements
However when i apply it to my website i get an error saying “index is undefined”.
The code i have is this
$w.onReady(function () {
//TODO: 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 vectorImage1_click(event, $w) {$w(“#group2”).show();
//Add your code for this event here:
}
How can i solve this ? 
Seems to me that instead of:
$w.onReady(function () {
//TODO: function toggleFold(index) {
You need:
function toggleFold(index) {
Notice that the function statement declared index as a parameter.
Refer to the Collapse Elements example for the full code.
I hope this helps.
Yisrael
Hi Yisreal, I followed exactly the same code as the example from Wix and renamed every item with the same id naming. But when i preview it on the page, the box did not expand, the down arrow did not appear, and i got a message that in order to debug, i need to open masterPage.js and Ob0ee.js, of which these 2 I do not have unless I create them myself but I also not sure what am i supposed to add in these 2 js?
Ok. I finally solved it! Reason is because we cannot fully copy the example in Wix Code example .
The autogenerated onclick event has different naming in our current editor page . See image below. And we cannot edit that naming. So I need to change the “_onClick” in the code to “_click”. Then everything works just fine. Probably Wix needs to update this change.
Hi, I’m so glad you solved it! I am trying to add a collapsable element to my website as well. However, i copied these codes and pasted them onto my page in Wix Codes, but absolutely nothing shows.
What am I missing here? I would greatly appreciate any help! Thanks.
Hi Yvonne, you cannot just copy these codes. As explained in my post, the codes from Wix is outdated. You need to check the coding for any “_onclick” naming and change to “_click”. Hope this clarifies.
@nschanstudio I changed “_onclick” to “_click” and did some more research but the code is still not expanding my collapsed box. Here is my code:
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_Click(event) {
toggleFold(1);
}
export function headerBox2_Click(event) {
toggleFold(2);
}
Any advice would be greatly appreciated!
Thanks again,
Yvonne
@yvonne088 You state: I changed “_onclick” to “_click” but your functions have _Click, not _click. Could this be your problem?
@yisrael-wix You are seriously a hero - it works now! Thank you so much for taking the time to help me out, I really appreciate it.
@yvonne088 Glad to hear. I’ll buy a cape tomorrow.
@yisrael-wix glad you solved it with the help of others. yes it is THAT case sensitive. I really hope Wix can really update its code as soon as possible.
