I've been attempting to edit the Collapse Elements example, but stuck on swapping out the container for a button. I have my button named 'coachButton1'. I would like to click this button to show a strip named 'fold1'.
This is the example code... how do I change the container/arrow to a simple button here? Thanks in advance.
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]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}
export function coachButton1_onClick(event) {
toggleFold(1);
}
export function coachButton2_onClick(event) {
toggleFold(2);
}
export function coachButton3_onClick(event) {
toggleFold(3);
}
export function coachButton4_onClick(event) {
toggleFold(4);
}
You are using the example and code from here.
https://www.wix.com/corvid/example/collapse-elements
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] .filter(idx => idx !== index) .forEach(idx => { $w('#fold' + idx).collapse(); $w('#arrowDown' + idx).hide(); $w('#arrowRight' + idx).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); }