Collapsible Elements not working in dashboard preview

Ask the community
, ,
1

Hello!

I have modified some code from a Wix tutorial to collapse and hide elements of a restaurant menu. So whenever a user clicks on the text “Appetizers” for example, the list of appetizers will drop down below it. Now this functionality works fine in the Editor Preview, but on Dashboard preview and the Live site, the functionality does not work.

I’m not sure what I am missing, my code is posted below. I have a hunch I may have to create a collection, but after reading some documentation about it, I was having trouble understanding if this is a situation to use them. Any help would be greatly appreciated, thank you!
#collapsible_elements

function toggleFold(index) {
 let $fold = $w('#fold' + index);

 //toggle fold at index
 if ($fold.collapsed) {
        ($fold).expand();
    }
 else {
        $fold.collapse();
    }
}

export function headerBox1_onClick(event) {
    toggleFold(1);
}

export function headerBox2_onClick(event) {
    toggleFold(2); 
}
etc..
2

This line needs to be changed from:

($fold).expand();

to

$fold.expand();
3

I just tried your suggestion and this also works in the editor preview, but in the dashboard preview the functionality is still not there. Thanks for the response! Any other ideas are welcome!