Code to collapse a section not working?

Ask the community
,
1

Hi there,

I am attempting to use a button to collapse part of my home page to reveal a section, i have added the code to expand the section whilst hiding the expand button and showing the collapse button.

I have then added code to collapse the section whilst hiding the collapse button and showing the expand button. The code is as follows:

export function ExpandShape_click(event, $w) {
//Add your code for this event here:
}$w(‘#ServicesList1’).expand()
$w(‘#ExpandShape’).hide(effectName, effectOptions)
$w(‘#CollapseShape’).show(effectName, effectOptions)

export function CollapseShape_click(event, $w) {
//Add your code for this event here:
}$w(‘#ServicesList1’).collapse()
$w(‘#CollapseShape’).hide(effectName, effectOptions)
$w(‘#ExpandShape’).show(effectName, effectOptions)

Can you please tell me where I am going wrong as none of it is working. Here is a link to the home page of my website, it is regarding the “SERVICES WE OFFER” towards the bottom of the page.

Many thanks in advance,
Luca

2

Hi Luca,

Please use this code

let flipOptions = {
“duration”: 2000,
“delay”: 1000,
“direction”: “right”
};

export function ExpandShape_click(event, $w) {
//Add your code for this event here:
$w(‘#ServicesList1’).expand()
$w(‘#ExpandShape’).hide(“flip”, flipOptions)
$w(‘#CollapseShape’).show(“flip”, flipOptions)
}

export function CollapseShape_click(event, $w) {
//Add your code for this event here:
$w(‘#ServicesList1’).collapse()
$w(‘#ExpandShape’).show(“flip”, flipOptions)
$w(‘#CollapseShape’).hide(“flip”, flipOptions)
}

More effect options here EffectOptions - Velo API Reference - Wix.com . And please be careful with brackets.

3

Also note hide and show return promises so you can also prevent an element showing until another finishes hiding or vice versa by embedding the dependent hide/show in a .then statement.

4

Hi olesiaz,

Thank you so much for your help, my menu now opens when clicking the button.

I still have a problem, the button to close the menu does not appear, so I am unable to collapse the menu again. Do you know how to fix this?

Many thanks,
Luca

5

Luca:

I just looked at your page. The collapse button is not hidden it is collapsed. You need to expand it not show it. Or you need to hide it instead of collapsing it :wink:

6

Hi stcroppe,

I feel so stupid haha! How would I go about fixing this? It’s melting my mind.

EDIT: I have fixed it!! But when I collapse it, the expand button doesn’t reappear??

7

Luca:

You need to choose one method for hiding the button or the other. So since you are using show and hide you need to stick with that.

So edit the properties on the $w(‘#CollapseShape’) and uncheck the Collapsed on load check box and check the Hidden on load checkbox instead

408×624 47.4 KB

Then change your code so that you are showing and hiding the elements not expanding and collapsing…
So use the code as you had it before based on olesiaz suggestion:

export function ExpandShape_click(event, $w) {
    //Add your code for this event here:
    $w('#ServicesList1').expand()
    $w('#ExpandShape').hide("flip", flipOptions)         
    $w('#CollapseShape').show("flip", flipOptions)
}  

export function CollapseShape_click(event, $w) {
    //Add your code for this event here:
    $w('#ServicesList1').collapse()
    $w('#ExpandShape').show("flip", flipOptions) 
    $w('#CollapseShape').hide("flip", flipOptions)
}

Then all should work fine :slight_smile:

8

Thank you very much for all your help!