Large White Space w/ Collapsible Text Box

Ask the community
,
1

EDIT: Here’s a link to the live site, with the white void.
https://www.cvh4h.org/donating-to-the-restore

Hello!

I’ve been having an issue with a large white space at the bottom of the page, when using code to create collapsible content boxes. This has happened to two pages on the website I’ve been working on for Habitat for Humanity. I’ve read two other topics with this issue, but to no resolution.

Here’s a screenshot of the page in editor. I’ve removed all possible spaces in between elements.

1600×900 125 KB

Here’s the page when in preview. When all boxes are collapsed, it’s as if the elements are still taking up that much space despite the fact that they’re collapsed. This is zoomed out to 25%, that’s a lot of white space!

1600×900 70.2 KB

I’m using a code found through Corvid.

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.fold();
}
else {
$fold.collapse();
$arrowdown.fold();
$arrowright.show();
}
// collapse the other folds
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
.filter(idx => idx !== index)
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
$w(‘#arrowdown’ + idx).fold();
$w(‘#arrowright’ + idx).show();
})
}

// appliances ap 1
export function aphead_onclick(event) {
toggleFold(1);
}
etc. etc.

Has anyone found a solution for this? Is there an error/something missing from the code that I could add?

Thank you so much!

2

You are using this tutorial with the code below too.
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);
}

Well your code looks okay with the only difference being you have used your arrow ids as ‘arrowright’ and ‘arrowdown’ instead of ‘ArrowRight’ and ‘ArrowDown’ from the original tutorial code and it looks more like you have the phantom white space error which has plagued Wix for many times before!

I’ve had similar when trying to have a strip collapsed on load on one of my pages with the footer being brought up the page when the strip was not shown on the page.

However whatever I did I could not get the footer to come up to be in the right place when the strip was collapsed until I stumbled onto a previous forum post that gave me the answer which was simple and easy to implement.

All I had to do was to cut the collapsed strip using keyboard commands and not using your mouse through the Wix Editor. Then simply paste it back onto the page using keyboard commands again and not using your mouse through Wix Editor.

So, I would suggest that you group all the collapsed boxes so that they can be all selected together, if they are not already placed inside a container.

Then use keyboard commands to cut the group or the container and move everything up to where it should be without the group or container there and save the website.

Then use keyboard commands to paste the group or container back into place and move the elements underneath the group to where they should be and then save and publish your website again.

Although you say that you’ve deleted all elements and moved them up so that there is no space between them, however on the first pic you have an unused strip on your page.

So I would suggest that you delete this strip too unless you are actually using it for something as this could also potentially be affecting things when the user starts expanding and collapsing the folds.

3

Its interesting that this whitespace issue only comes up sometimes. Ive had pages where the textbox expands and collapses without having the whitespace issue, and others built similarly using word-for-word code but creates the whitespace issue.
Following what you said, to cut and paste the group or container box worked perfectly for me though.
Im wondering if maybe another way to fix this issue is to snap the bottom of the strip containing the show more/less boxes to the bottom of the last show more/less text box or container. Just a hunch, but I havent been able to test it just yet.

EDIT:
My hunch appears to work. Play around with the strip containing the Show More/Less boxes, the container, and the strip or element below the show more/less boxes section. If the borders of all three (or 2, depending on your layout) are “snapped” together or in close proximity, there doesnt seem to be a whitespace issue. I was able to create and remove the whitespace issue just by sliding the border of the strip following the boxes by a few pixels away from the bottom of the boxes

Hope this helps!