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.