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.
![](https://static.wixstatic.com/media/a27d24_654bd1f67ec94516aa7c59ee2b48d032~mv2.png/v1/fill/w_49,h_34,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_654bd1f67ec94516aa7c59ee2b48d032~mv2.png)
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.
![](https://static.wixstatic.com/media/a27d24_54628fe70def4e7fa8322aedbe275dc3~mv2.png/v1/fill/w_49,h_30,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_54628fe70def4e7fa8322aedbe275dc3~mv2.png)
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?
![](https://static.wixstatic.com/media/a27d24_95060bb9509d4670b2e61978d8527f91~mv2.png/v1/fill/w_48,h_18,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_95060bb9509d4670b2e61978d8527f91~mv2.png)
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?
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.
Thanks, that did help. I have a few small issues though:
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.
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.
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.