Hi guys, I have been testing and playing around with the collapsible content example.
Everything works the way it should except for some strange gaps being displayed when it should only be collapsible and out of view.
See this page and you will understand why. All of the rest have blank spaces.
I have double checked the properties values so that they match. But still getting this error.
Please help
The wix code is here:
function toggleFold(index) {
let $fold = $w(‘#fold’ + index);
let $arrowDown = $w(‘#arrowDown’ + index);
let $arrowRight = $w(‘#arrowRight’ + index);
console.log(‘sw:’, $w);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
console.log(‘fold:’, $fold);
// collapse the other folds
[1,2,3,4,5,6,7,8,9,10,11,12]
.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);
}
export function headerBox5_onClick(event) {
toggleFold(5);
}
export function headerBox6_onClick(event) {
toggleFold(6);
}
export function headerBox7_onClick(event) {
toggleFold(7);
}
export function headerBox8_onClick(event) {
toggleFold(8);
}
export function headerBox9_onClick(event) {
toggleFold(9);
}
export function headerBox10_onClick(event) {
toggleFold(10);
}
export function headerBox11_onClick(event) {
toggleFold(11);
}
export function headerBox12_onClick(event) {
toggleFold(12);
}
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);
}
export function headerText5_onClick(event) {
toggleFold(5);
}
export function headerText6_onClick(event) {
toggleFold(6);
}
export function headerText7_onClick(event) {
toggleFold(7);
}
export function headerText8_onClick(event) {
toggleFold(8);
}
export function headerText9_onClick(event) {
toggleFold(9);
}
export function headerText10_onClick(event) {
toggleFold(10);
}
export function headerText11_onClick(event) {
toggleFold(11);
}
export function headerText12_onClick(event) {
toggleFold(12);
}
