For the Collapse Elements code (found at https://www.wix.com/code/home/example/Collapse-Elements), I was wondering if there is a way to expand/collapse all folds at once? Like a [+][-]
Also, is there a way to allow more than one menu to be expanded at a time? Like click Menu A, then click Menu B, and have both stay open?
#collapse #elements code #expand #multiple #menus
Hello,
For toogle all tables you can use functions for open/close all at once.
function openAlltabs(index) {
[1, 2, 3, 4]
.forEach(idx => {
$w(‘#fold’ + idx).expand();
$w(‘#arrowDown’ + idx).show();
$w(‘#arrowRight’ + idx).hide();
})
}
function closeAlltabs(index) {
[1, 2, 3, 4]
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
$w(‘#arrowDown’ + idx).hide();
$w(‘#arrowRight’ + idx).show();
})
}
And to allow more than one menu to be expanded at a time you can use this
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();
}
}
export function headerBox1_onClick(event) {
toggleFold(1);
}
export function headerBox2_onClick(event) {
toggleFold(2);
}
export function headerBox3_onClick(event) {
toggleFold(3);
}
export function headerBox4_onClick(event) {
toggleFold(4);
}
export function headerText1_onClick(event) {
toggleFold(1);
}
export function headerText2_onClick(event) {
toggleFold(2);
}
export function headerText3_onClick(event) {
toggleFold(3);
}
export function headerText4_onClick(event) {
toggleFold(4);
}
Sorry for the late response, but yes, this is perfect! Thank you so much!
Edit: Is there any way to disappear the extra space at the bottom of the page and make the page responsive, so that opening all the menus makes the page longer automatically?
To delete the extra space = double click on the upper edge of the footer