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.
![](https://static.wixstatic.com/media/a27d24_d7c1aa91df7b4c0da5fb328a74be1f1c~mv2.png/v1/fill/w_980,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_d7c1aa91df7b4c0da5fb328a74be1f1c~mv2.png)
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!
![](https://static.wixstatic.com/media/a27d24_9a5e985dbd0649dea399742aa7dcee1d~mv2.png/v1/fill/w_980,h_551,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_9a5e985dbd0649dea399742aa7dcee1d~mv2.png)
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!
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.