I have created a menu page with individual sections/elements that expand and collapse when each section’s header is clicked.
Expected Functionality :
- User clicks on menu header section (container box):
- Second container box corresponding to that menu section directly below the header should expand and the “right” arrow should be hidden, while the “down” arrow for that section should be shown.
Actual Functionality (Live Site only - Preview works fine) :
- User clicks on menu header section (container box):
- Second container box corresponding to that menu section DOES NOT expand; however, the arrow icons show/hide correctly.
Page Code :
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]
.filter(idx => idx !== index)
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
$w(‘#arrowDown’ + idx).hide();
$w(‘#arrowRight’ + idx).show();
})
}
export function menuHeader1_click(event) {
toggleFold(1);
}
export function menuHeader2_click(event) {
toggleFold(2);
}
export function menuHeader3_click(event) {
toggleFold(3);
}
export function menuHeader4_click(event) {
toggleFold(4);
}
export function menuHeader5_click(event) {
toggleFold(5);
}
…
I have used this exact same code on another site with no issues. Any help would be greatly appreciated.
Thank you!
-Ben