TOGGLEBOX issue

Ask the community
,
1

Hi everyone, I’m just learning Velo but have a client who wants collapsible sections. I followed the example, lifting the code sample and it works first few times I test it but then something happens - the collapsed box remains collapsed and the elements inside become detached and the sections pile up on each other. Would really appreciate some advice. Thanks so much!

2

Hi there :wave:t2: Could you share the code you’re using, and some screenshots of your site?

3

Hi thank you for your reply. ok here is the code straight from the sample and I even used the all the same names to avoid any hassle. You can see on unpublished that the collapsed box is collapsed with elements on the outside. Then in the published site you can see the box just forming a line…it doesn’t open? Thanks again!

$w . onReady ( function () {
$w ( ‘#newYorkCollapseButton’ ). onClick (() => {
toggleBox ( $w ( ‘#newYorkCollapsibleBox’ ), $w ( ‘#newYorkPlusSign’ ), $w ( ‘#newYorkMinusSign’ ));
});

$w ( '#tokyoCollapseButton' ). onClick (() => { 
    toggleBox ( $w ( '#tokyoCollapsibleBox' ),  $w ( '#tokyoPlusSign' ),  $w ( '#tokyoMinusSign' )); 
}); 

$w ( '#parisCollapseButton' ). onClick (() => { 
    toggleBox ( $w ( '#parisCollapsibleBox' ),  $w ( '#parisPlusSign' ),  $w ( '#parisMinusSign' )); 
});

});

function toggleBox ( boxElement , plusSign , minusSign ) {
const isCollapsed = boxElement . collapsed ;
if ( isCollapsed ) {
plusSign . hide ();
minusSign . show ();
boxElement . expand ();
} else {
minusSign . hide ();
plusSign . show ();
boxElement . collapse ();
}
}

2262×576 147 KB

4

1994×608 205 KB

5

@joanie21836 Your code seems correct, I assume you are testing in Preview mode? I’ve found that collapsing elements behave strangely in Preview but work well on the Live site. There have been many times where I’ve had to rebuild my collapsing element after testing in Preview, I’ve given up on it and only test on Live now.
I know it’s not a very helpful answer, maybe someone else has a solution! Or maybe bring it to the attention of Wix Support.

6

OK good to know that the code is correct and thanks for taking the time to reply. will try live and see how that looks :slight_smile: