Getting rid of empty space for collapsible sections

Ask the community
1

Hi everybody! I’m having some issues with empty space for my collapsible sections. I’m currently using the following 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]
        .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);
}

Edit Site View: Preview:

369×646 47.8 KB

371×637 47 KB

Is there a way to get rid of the empty space that the collapsed section would take up as shown in the Preview image?

Thanks in advance! :slight_smile:

2

with code related question, it will have more chance that you will receive proper assistance on Velo forum: https://community.wix.com/velo/forum or for example in our Facebook group

from my side I can suggest you to check the following:

  1. Make sure the IDs of the elements referenced in the function are correct. Double-check that the IDs of the folds, arrow down, and arrow right elements are consistent with the IDs used in the function.
  2. Make sure that the $fold variable is referencing the correct element. One way to check this is to add a console.log($fold) statement before the if statement and checking the console output for the element.
  3. Make sure that the $fold element has the “collapse” state set initially. If the $fold element is already expanded when the function is called, then the collapse() method will have no effect. You can set the initial state of the $fold element to collapsed by selecting the element and choosing “Collapsed” under the “Fold” setting in the Properties panel.

but no specific information, this is only general recommendations