Expand and Collapse elements on page

Ask the community
,
1

Hi all,

I am having trouble with the collapse/expand code explained here: https://www.wix.com/code/home/example/Collapse-Elements

I have used the exact code and have gone through all my boxes and elements to check if they are labeled right. And yet when I publish the site the boxes are all collapsed and when i hold the curser over the arrow it recognizes that the item is “Clickable” but the boxes will not expand.

It is a dynamic page (no idea if that is an issue) and there is other code written on the page…

Anybody got an answer? The code im using is:

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() {
toggleFold(1);
}

export function headerBox2_onClick() {
toggleFold(2);
}

export function headerBox3_onClick() {
toggleFold(3);
}

export function headerBox4_onClick() {
toggleFold(4);
}

export function headerText1_onClick() {
toggleFold(1);
}

export function headerText2_onClick() {
toggleFold(2);
}

export function headerText3_onClick() {
toggleFold(3);
}

export function headerText4_onClick() {
toggleFold(4);
}

2

Hey Daniel

Did you make sure to correctly rename the #id fields of all of the elements which are to do the collapsing/expanding? i.e. fold, arrowDown,arrowRight?

3

See if my video helps you a bit …

4

I have gotten it to work a little bit but only after i inserted the export functions for the arrows. But i shouldnt have to do that should i? Also when i click on the text box and text nothing happens. All #id are matching the code.

This is what i added:

export function arrowRight2_onclick() {
toggleFold(2);
}
export function arrowRight1_onclick() {
toggleFold(1);
}
export function arrowRight3_onclick() {
toggleFold(3);
}
export function arrowRight4_onclick() {
toggleFold(4);
}
export function arrowDown1_onclick() {
toggleFold(1);
}
export function arrowDown2_onclick() {
toggleFold(2);
}
export function arrowDown3_onclick() {
toggleFold(3);
}
export function arrowDown4_onclick() {
toggleFold(4);
}