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?
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);
}