Collaps & Expand

Ask the community
,
1

Hi Wix Users,

I am struggling with this example: https://www.wix.com/corvid/example/collapse-elements

I think I did everything right. Copied code, renamed my elements to match exactly with IDs in example but it does not do anything.

Do you have any idea what I do wrong?

Or I basically do not need to collapse one Box if another expands , boxes may remain expanded until users click on them again to collapse them.

Thanks for help.

2

Did you add the onClick event handler functions to the elements through the properties panel or just simply copy and paste all of it?

Make sure that the onClick event handlers are added for the headerBox containers through the properties panel for them.

3

Of course I did.

4

@sebastianpavelka Post your code

5

Then it should all work fine, if you open one box through the arrow it will open up the hidden part, then when you click on another arrow it will close the already open box and open the new one that you selected.

If you look at the sample on the tutorial page, it will show you what happens when you click on the arrows.

6

@givemeawhisky yes it should be doing this action. But it is not.

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);
}
7

I GOT IT!

I found mistake. In the Wix Example the code for function is written with onClick

export function headerBox4_onClick(event) {

But properties are adding just “click”

Now it seems to work.