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:
- I have 15 items in my menu, but only 1 - 9 are appearing when I preview my page
- 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
