Collapse elements tutorial throwing error

Ask the community
,
1

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

2

Can anyone help me? I’m not sure what is going wrong, it’s gotta be something real simple that I’m not thinking of

3

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.

4

For anyone wanting to make it work in mobile view without the arrows (the design I have doesn’t allow space for it, I had to wrap it in an if/else statement:

import wixWindow from ‘wix-window’;
function toggleFold(index) {
if(wixWindow.formFactor === “Mobile”) {
let $fold = $w(‘#fold’ + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
}
else {
$fold.collapse();
}
// collapse the other folds
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
.filter(idx => idx !== index)
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
})
}
else{
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,18]
.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);
}

export function headerBox5_onClick(event) {
toggleFold(5);
}

export function headerBox6_onClick(event) {
toggleFold(6);
}

export function headerBox7_onClick(event) {
toggleFold(7);
}

export function headerBox8_onClick(event) {
toggleFold(8);
}

export function headerBox9_onClick(event) {
toggleFold(9);
}

export function headerBox10_onClick(event) {
toggleFold(10);
}

export function headebox11_onClick(event) {
toggleFold(11);
}

export function headerBox12_onClick(event) {
toggleFold(12);
}

export function headerBox13_onClick(event) {
toggleFold(13);
}

export function headerBox14_onClick(event) {
toggleFold(14);
}

export function headerBox15_onClick(event) {
toggleFold(15);
}

export function headerBox16_onClick(event) {
toggleFold(16);
}

export function headerBox17_onClick(event) {
toggleFold(17);
}

export function headerBox18_onClick(event) {
toggleFold(18);
}