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 ? :)
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.
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 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?
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