Collapse elements tutorial does not work

[jrichards]

Tutorial: https://www.wix.com/velo/example/Collapse-Elements
When you click ‘edit now’ and play with it, it works. If you copy all of the elements on the page and the code, and paste it onto a different site, it does not work.
If you copy and paste the code but recreate each element and name it correctly, it does not work.
Particularly, every time I copy and paste the elements, #container3 always gets renamed to #box1, even when pasted. There are no other elements on the page (that I can see) and none named container3. How can I get that box to be called container3? Is that why the whole thing doesn’t’ work?
This is the tutorial after you click ‘edit now’. It works.

This is the same objects and code pasted into one of my site pages. Does not work. Container3 renames itself every time and can’t be changed. I don’t have code on any other pages. I started messing with the tutorial because I really want some expand and collapse boxes on my site and the only way to get it was to open dev mode.

HELP!

Edit 1:
My site shown below. If I click on headerBox1 and then select on onClick event from the panel on the right side, it adds a function (lines 39-46 below). If I type the toggle below it, then it will work! I’m still not sure if I’m doing this correctly and if this ‘fix’ is an actual fix or just a band aid.

I noticed it’s _click instead of _onClick. Is there a reason for this?

[marlowe-shaeffer]

This article will help you understand how to work with Velo examples, including what you need to do when copying and pasting the code, using the Properties & Events panel, and making sure the ID in your code matches the element ID.

[jrichards]

Thanks, that did help. I have a few small issues though:

1. Space between the boxes in preview mode. Even when I squish them together as close as they go, there is still a space between them in preview mode. The space is the size of the hidden box.

2. I did not alter the code from the example but now when I click one box it expands and once I click another, it collapses. Only one box is open at a time basically. It functioned differently in the example. How do I get back to that?
   Note: From the example code, I deleted the two background container boxes. I didn’t really need them and including them made the page the length it would be if all the boxes were expanded.

[jrichards]

So, now some of the boxes are spaced out and will not go back together. The elements don’t move up and down as expanded and collapsed.

Didn’t change the code. Not sure what’s going on.

[jrichards]

I tried putting everything in a container box again and that made it worse. So now nothing moves up or down, defeating the purpose of making collapsible boxes. Can anyone help?

[marlowe-shaeffer]

The ID for each element needs to match the ID in the code. So if you deleted background container boxes that are still onscreen or in code, without also changing it in your code/onscreen, it won’t work.

You will need to include your code here and some screenshots for someone to help troubleshoot the issue.

[jrichards]

@marlowe-shaeffer
All code below. It’s the exact same as the tutorial. The two container boxes aren’t named in the code so I thought deleting them would be okay.
I have several boxes that are all supposed to collapse. The first picture shows it in preview mode, the second shows the elements. They’re right next to each other, but they won’t move together. But, the boxes below will move together. I can’t figure it out! Nothing is in an overall container box so it can’t be that since part of it works. I think somehow they became ‘detached’ from each other, but I can’t get them back together.

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 ]
.filter(idx => idx !== index)
.forEach(idx => {
$w( ‘#fold’ + idx).collapse();
$w( ‘#arrowDown’ + idx).hide();
$w( ‘#arrowRight’ + idx).show();
})
}

export function headerBox1_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 1 );
}

export function headerBox2_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 2 );
}

export function headerBox3_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 3 );
}

export function headerBox4_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 4 );
}

export function headerBox5_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 5 );
}

export function headerBox6_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 6 );
}

export function headerBox7_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 7 );
}

export function headerBox8_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
toggleFold( 8 );
}