Hello everyone,
I'm totally new to Corvid, Wix code and I'm having some trouble, so I apologize in advance if I don't give you all the details you need right off the bat.
I have been trying to develop a collapsible menu for an online course I will be putting on our website.
I found this useful example of a collapsible menu and stole the code from it and painstakingly created my page with all the elements I wished to have in each part of the collapsible menu. It involves having everything inside container boxes and naming them appropriately to toggle to "folding" or collapsing of the right boxes.
The problems I am having are:
1) I have 15 items in my menu, but only 1 - 9 are appearing when I preview my page
![](https://static.wixstatic.com/media/a27d24_a046a5a795734d29a6e6d70832127853~mv2.jpg/v1/fill/w_952,h_727,al_c,q_85,enc_auto/a27d24_a046a5a795734d29a6e6d70832127853~mv2.jpg)
2) When clicking the first 3 menu items it will collapse the rest automatically, but clicking menu item #4 onward does not toggle the other items to collapse.
My questions are:
1) Why are only the first 9 items appearing in the menu? One thing I should mention: My menu is a lot bigger and contains more stuff than the example and so I found that the overarching container box could not be stretched big enough to hold everything and so I had to put some elements into a separate container box. Is it because I had to split it into another container box or is there something missing in my code?
2) Why are the menu items not automatically collapsing when clicking #4 onwards? I thought it was covered by the if/else statement in the code here?
The code I currently have is:
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]
.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);
}
export function headerBox5_click(event) {
toggleFold(5);
}
export function headerBox6_click(event) {
toggleFold(6);
}
export function headerBox7_click(event) {
toggleFold(7);
}
export function headerBox8_click(event) {
toggleFold(8);
}
export function headerBox9_click(event) {
toggleFold(9);
}
export function headerBox10_click(event) {
toggleFold(10);
}
export function headerBox11_click(event) {
toggleFold(11);
}
export function headerBox12_click(event) {
toggleFold(12);
}
export function headerBox13_click(event) {
toggleFold(13);
}
export function headerBox14_click(event) {
toggleFold(14);
}
export function headerBox15_click(event) {
toggleFold(15);
}
Any help anybody could give me would be very much appreciated as I feel like I'm so close to making this work, but I've greatly surpassed my level of expertise.
All the best,
Adam
Okay, just so you know that it does work with whatever number of items you put in there.
https://givemeawhisky.wixsite.com/foldtest/fifteenpages
Just make sure that you have these things covered.....
1.
Make sure that your array with the fold numbers in does not contain any spaces in the line.
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] //Must not have spaces here//
2.
Make sure that your headerBox containers all have the onClick event added in the properties panel for it and that they are named with the correct number going up consecutively.
3.
Make sure that the two arrows used in each headerBox are named arrowDown and arrowRight, followed by the same number as the headerBox itself.
Check that the arrowDown is set to hidden on load as it is not shown first.
Check that the arrowRight is set to be shown on load as it is shown first.
4.
Make sure that each container called fold is the same number as the headerBox container being used above it and it is set to be collapsed on load as it is not shown first.
5.
Make sure that you add all the toggleFold functions under the appropriate onClick function for it in the code.
When you add the onClick event handler for the fold container through the properties panel, it will automatically add the export function line to your code.
If you already have say fold1 container onClick event handler setup in your code, then if you add the onClick event through the properties panel it will add it again with a _1 on the end as you already have it on your page.
If you simply delete the extra _1 at the end of the onClick name before you press return, then it will know to not add it to the page again and register that onClick event to the already existing line of code.
export function headerBox15_click(event) {
This is code that gets added automatically to the bottom of your page when you add the onClick event to the element through the properties panel.
$w("#headerBox15").onClick( (event) => {
This is code which has the onClick event handler function written into the code itself, so you don't need to add the onClick event through the properties panel.
Hi there,
Thank you for your reply!
I was playing around with it and found that some of my elements were just slightly out of the container box I had set up and that was what was causing modules 10 - 15 not to appear. So those are working now! However, the other folds are still not collapsing automatically when I open another module and I'm not sure why
I have attached some pictures below of my page and element setup:
I have one large container box that houses everything and the two boxes as in the example
-The headerbox with the arrows, which I have set the down arrow as hidden on load.
And I have all of my content that I want to collapse within another container box that I have named fold (and then the number) for each module. The only difference I can see is that I used container boxes to hold some things within the fold container box, just to help them maintain their positions and align properly etc. But that shouldn't matter as long as they're all within the 'fold' container box right?
As for the click event handlers, I thought I had added them as the export functions. This is what my code looks like on the page itself:
I thought if I added the new numbers to the area below where the code says //collapse all the other folds and added in the new headerbox_click(event)s that it should work? Am I missing something there? Which part of this code is triggering the other sections to fold when another one is clicked?
Thanks again for your help!
Make sure that you have set everything up as in the tutorial itself with the two containers for each section.
The headerBox container must have the title header and the two arrows attached to it, with the arrowDown being set to hidden on load.
The second container for the fold must be set as collapsed on load and have all the elements for it attached to that one container.
The container called fold is what is used in the code, so if it is setup correctly, then when you click on the menu header the collapsed fold container for that one will open and the other one that is currently open should be collapsed again.
This needs to be exactly the same for all fifteen (15) of your sections otherwise it will not work for you and regardless of the number of sections, they should all still show in the collapsed state with just the headerBox containers being shown when you first load the page in your site.