I’ve followed an example point for point to add a collapsable menu on my website - everything works except that it won’t collapse - any ideas where i have gone wrong?
Post your code (not a screenshot)
What example? Does the example work? If so, then you didn’t copy it “point for point”. You missed something somewhere along the line.
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)
}
export function headerBox3_click(event) {
toggleFold(3)
}
export function headerBox4_click(event) {
toggleFold(4)
}
Thanks posted below
So you are using this Corvid example.
https://www.wix.com/corvid/example/collapse-elements
Did you look at the example in your own editor and understand what all the code does and is used for?
Did you do what Yisrael mentioned and just copied and paste it onto your own page and do all your elements id names matchup with the code?
If you did, then you have probably missed out the onClick event handlers for each of the four headerBoxes.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel
Thanks for the reply, I didn’t just copy and paste, I went through an named all my elements and added the on click triggers etc
All the on click functions work - it’s just that in preview mode it’s not collapsing together. I have set the box to be collapsed on load, which it is doing - but they are not moving to sit underneath each other on collapsed view.
Try checking your code as you are missing the ‘;’ on each of your toggleFold.
Yours is…
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)
}
Should be…
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);
}
Also, have you made sure that the container boxes underneath each headerBox have the id name of fold1, fold2 etc, as it is that container box which all the elements inside it are attached to that is being expanded and collapsed.
It is also that container box that needs to be set to collapsed on load too and not any of the elements inside it, as they will all be covered by the collapsed on load of the container box that they are all attached to.
Or use this one instead It’s shorter and should work the same):
const numberOfBoxes = 4;//use the real number
let selector = "";
for(let i = 1; i =< numberOfBoxes; i++){selector += "#headerBox" + i + ",";}
$w.onReady( function() {
$w(selctor).onClick(event => {
let targetId = event.target.id;
let idx = targetId[targetId.length - 1];
if(!$w('#fold' + idx).collapsed){
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
} else {
$w('#fold' + idx).expand();
$w('#arrowDown' + idx).show();
$w('#arrowRight' + idx).hide();
}
})
})
(done)
Yes, if you can’t get the tutorial to work for you, then simply use J. D. code above. 
My code above doesn’t include collapsing all the other boxes. If you want to do that, try:
const numberOfBoxes = 4;//use the real number
let selector = "", indexes = [];
for(let i = 1; i =< numberOfBoxes; i++){
selector += "#headerBox" + i + ",";
indexes.push(i.toString());
}
$w.onReady( function() {
$w(selctor).onClick(event => {
let targetId = event.target.id;
let idx = targetId[targetId.length - 1];
if(!$w('#fold' + idx).collapsed){
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
} else {
$w('#fold' + idx).expand();
$w('#arrowDown' + idx).show();
$w('#arrowRight' + idx).hide();
}
let otherBoxes = indexes.filter(e => e !== idx);
otherBoxes.forEach(e => {
$w('#fold' + e).collapse();
$w('#arrowDown' + e).hide();
$w('#arrowRight' + e).show();
})
})
}
On second thought, you can do it shorter:
const numberOfBoxes = 4;//use the real number
let selector = "", indexes = [];
for(let i = 1; i =< numberOfBoxes; i++){
selector += '#headerBox' + i + ",";
indexes.push(i.toString());
}
$w.onReady( function() {
$w(selctor).onClick(event => {
let targetId = event.target.id;
let idx = targetId[targetId.length - 1];
let currentState = $w('#fold' + idx).collapsed;
indexes.forEach(e => {
$w('#fold' + e).collapse();
$w('#arrowDown' + e).hide();
$w('#arrowRight' + e).show();
})
if(currentState){
$w('#fold' + idx).expand();
$w('#arrowDown' + idx).show();
$w('#arrowRight' + idx).hide();
}
})
}
when i see your screenshot 1
do you mean “2nd collapsible button not moves up underneath 1st collapsible button?”
if yes maybe you need to move the 2nd collapsible button underneath 1st collapsible element
also if you’re attaching screenshot with code, make sure to crop or set it to lower resolutions, not all people have a 1000inch monitor like yours 
Thank you for all your suggestions, I’m still having issues getting this to work. Would anyone be interested in jumping in and setting this up for a set price? Contact me at contact@bossbarhire.com.au