Hello, I’m back with a new question concerning the new elements I had added to my website. For my FAQ I wish for the elements to close when I click on a new element like here: https://www.wix.com/corvid/example/collapse-elements
I’ve c/p the code, did exactly what the tutorial said but unfortunately when I run the page I have this error every time I click on a new element and it opens:
And I don’t exactly see where the problem is to be honest neither how I can solve it. Everything actually works just fine and everything opens when it should but the error still remains.
I also have another problem. I have this huge space between the last question in the footer:
So when you say you have simply copied and pasted the code, have you named all the needed elements on your page to match the code example or have you renamed the elements in the code to match your page?
Is your code exactly the same as the page example code?
$w.onReady(function () {
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);
}
Also, make sure that your container boxes of fold1 to fold4 are the ones that have the collapsed on load ticked for them in the properties panel for each container.
Also, make sure that your container boxes of HeaderBox 1 to HeaderBox 4 all have the onClick event handler function turned on for each of the containers through the properties panel for each one.
As for the last issue with the large white gap, then simply try cutting the container box of fold3 using the keyboard controls for cut and then simply paste it back in using the keyboard control for paste.
Do not use the Editor’s cut and paste options as the keyboard command controls will cut and paste it back in the exact place that you cut it from.
Hello, thank you for your fast answer!
yes I’ve c/p everything and called the containers Header_Box with the on-click event as well as all the folds with the collapsed on load ticked.
For the wide gap I tried to do what you said, it didn’t change anything, I don’t understand why
For the wide gap, it looks like the element at the bottom of the page overlaps the footer. Resize it so it’s contained wholly within the page. If that doesn’t work then extend the page down and then double click the drag handle to automatically shrink the page to meet the lowest element.
The resizing worked when I doubled clicked on the page, yay!
As for the problem with the error in the code, it miraculously disappeared today, so I think it’s solved. How? I absolutely don’t know, but I’m not going to complain.
