Expand/Collapse not working on published site

Ask the community
,
1

I have four menus that can be expanded/collapsed using buttons. They all use the following code structure:


The code works as intended in preview mode; when the page is opened, the menus default to collapsed. When the button is clicked, the menu expands. However, on the published site, the menus do not respond to the button being clicked and they stay collapsed.

As an additional note, the onClick functions ARE on in the properties panel, and they are linked to the corresponding sections of code (when I click the onClick function in the properties panel, at automatically navigates to the corresponding section of code).

Any help would be greatly appreciated!

2 Likes
2

Your code is fine so the problem is somewhere else, but there’s not enough data here to locate the issue.
Try to see if it logs any error to the console.

3

FYI, I found 2 other recent threads on similar issue:

4

I’m having the same problem, did you find out what the problem is?

5

We are checking it, please post a link to the page with an issue. Thanks

6

@alexander-jdanov here www. opalatur .com .br/ironman-70-3-maceio

7

My multi state boxes worked fine until 2 days ago. Expanded state started to overlap on the box below.
The code works fine in editor and preview mode.

8

I have the same issue!! Must be a bug. Started happening 2 days ago also.

@yisrael-wix can you shed any light?

9

@alexander-jdanov
Would be great if you can have a look! End of the page :slight_smile: https://itsaboutromi.wixsite.com/website-2/1-lamp-1-tree

10

@stephenmccall Are you still experiencing the issue? I see that you have a banner on your site about it.

11

Principum, do you mean that the Google map is overlapping the form? Please confirm you’re still experiencing the issue and give us any more info to help troubleshoot. Thanks.

12

I’m having similar issues! The same exact code used to work fine something like a month ago when I last checked my website.
I checked my website again and, without changing any code, some expand/collapse and show/hide options are not working.

As an example, I have the following code on a specific page (not in masterPage.js):

$w.onReady(function () {
    $w('#menuLine1On').show()

 let glideOptionsLeft = {
 "duration": 350,
 "delay": 0,
 "angle": 270,
 "distance": 100,
    };
 let glideOptionsRight = {
 "duration": 350,
 "delay": 0,
 "angle": 90,
 "distance": 100,
    };

 if ($w('#menuLine2On').isVisible) {
        $w('#menuLine2On').hide("glide", glideOptionsLeft)
    }
 if ($w('#menuLine3On').isVisible) {
        $w('#menuLine3On').hide("glide", glideOptionsLeft)
    }
})

They’re some lines that appear under the site menu options. I added similar code to the other pages representing the links in the menu.

When I check the site in “preview mode”, the lines are correctly animated and everything works fine.

When I check it on the published site though, the animations no longer occur. The lines appear but without the “glide” animation.

13

@marlowe-shaeffer Hi Marlowe, I’m still having issues with overlapping multiboxes in expanded state. This happens on “Services” page. Better check out croatian version as english is partially under construction.
When I clink on a button in collapsed state, the text that shows up overlaps with other boxes. it doesnt create “extra space” like it shows in preview and edit mode.
There is no problem with google map.

14

Not to mention how messed up “timelines” are. I have the following code:

import wixAnimations from ‘wix-animations’;
import wixLocation from ‘wix-location’;

//menu buttons - home page
export function menuText1_mouseIn(event) {
let timeline1 = wixAnimations.timeline();
let timeline2 = wixAnimations.timeline();
let timeline3 = wixAnimations.timeline();
let fadeOptions = {
“duration”: 120,
“delay”: 0
}
timeline1
.add($w(‘#menuText1’), {
“rotate”: 0,
“scale”: 1.08,
“duration”: 200,
“easing”: “easeInOutCubic”
})
timeline2
.add($w(‘#menuLine1On’), {
“rotate”: 0,
“scale”: 1.08,
“duration”: 200,
“easing”: “easeInOutCubic”
})
timeline3
.add($w(‘#menuLine1Highlight’), {
“rotate”: 0,
“scale”: 1.08,
“duration”: 200,
“easing”: “easeInOutCubic”
})
timeline1.play();
timeline2.play()

timeline1.onStart(() => { 
    $w('#menuLine1Highlight').expand("fade", fadeOptions) 
    timeline3.play() 
});

}
export function menuText1_mouseOut(event) {
let timeline1 = wixAnimations.timeline();
let timeline2 = wixAnimations.timeline();
let timeline3 = wixAnimations.timeline();
let fadeOptions = {
“duration”: 120,
“delay”: 0
}
timeline1
.add($w(‘#menuText1’), {
“rotate”: 0,
“scale”: 1.0,
“duration”: 200,
“easing”: “easeInOutCubic”
})
timeline2
.add($w(‘#menuLine1On’), {
“rotate”: 0,
“scale”: 1.0,
“duration”: 200,
“easing”: “easeInOutCubic”
})
timeline3
.add($w(‘#menuLine1Highlight’), {
“rotate”: 0,
“scale”: 1.0,
“duration”: 200,
“easing”: “easeInOutCubic”
})
timeline1.play();
timeline2.play();

timeline1.onStart(() => { 
    $w('#menuLine1Highlight').collapse("fade", fadeOptions) 
    timeline3.play() 
});

}
export function menuText1_click(event) {
wixLocation.to(“/home”)
}

I pasted only the code for one of my menu buttons. Basically I have other two parts similar to the code above set up for the other two menu buttons.

Everything works fine, all menu links become bigger when I hover the mouse over them and they go back to normal when I no longer hover them.
The issue here is that when I click on one of the links, some random other links in the menu become bigger even if I didn’t hover the mouse over them.

15

@principiuminstrukcij Can you check your site again and let me know if the problem is resolved? Thanks!

16

Please send us the URL for your site, as well as the page where the problems occur, so we can troubleshoot. Thanks.

17

@marlowe-shaeffer Yes! Thank you very much!

18

@marlowe-shaeffer https://www.diamondinteriors.ro/
That’s the site. If you click on any of the 3 options in the header menu, the grey line under the menu links should move under the selected page link in an “animated” way.
Currently, whenever I click on the links, the grey line suddenly appears under the selected page link without moving in an animated way.

This is the code I used on the home page for the line animation (the same code replicates on the “products” and “contact” page but with a few changes to the line names such as #menuLine2On, #menuLine1Highlight, etc.):

$w.onReady(function () {
    $w('#menuLine1On').show()

 let glideOptionsLeft = {
 "duration": 350,
 "delay": 0,
 "angle": 270,
 "distance": 100,
    };
 let glideOptionsRight = {
 "duration": 350,
 "delay": 0,
 "angle": 90,
 "distance": 100,
    };

 if ($w('#menuLine2On').isVisible) {
        $w('#menuLine2On').hide("glide", glideOptionsLeft)
    }
 if ($w('#menuLine3On').isVisible) {
        $w('#menuLine3On').hide("glide", glideOptionsLeft)
    }
 if ($w('#menuLine1Highlight').isVisible) {
        $w('#menuLine1Highlight').collapse()
    }
 if ($w('#menuLine2Highlight').isVisible) {
        $w('#menuLine2Highlight').collapse()
    }
 if ($w('#menuLine3Highlight').isVisible) {
        $w('#menuLine3Highlight').collapse()
    }
})

This is the part that “animates” the grey lines:

let glideOptionsLeft = {
 "duration": 350,
 "delay": 0,
 "angle": 270,
 "distance": 100,
    };
 let glideOptionsRight = {
 "duration": 350,
 "delay": 0,
 "angle": 90,
 "distance": 100,
    };

 if ($w('#menuLine2On').isVisible) {
        $w('#menuLine2On').hide("glide", glideOptionsLeft)
    }
 if ($w('#menuLine3On').isVisible) {
        $w('#menuLine3On').hide("glide", glideOptionsLeft)
    }

As I mentioned yesterday, the code works fine in “preview mode” but it doesn’t on the published site.

19

It’s far from being the whole answer but might be the case for some of you; the Corvid forgets the elements’ properties set –at least for the onClick event– every new time the Editor opens; if you’re thinking on editing your site n publishing the changes, you might have to check that


**i swear i had written my code after onClick() and now it’s empty l:<

If the element doesn’t have an onClick function established, the rest of the code on the Corvid won’t be able to reckon it as the trigger for the collapse/animation, which happens to me every time I republish my site so i have to rewrite that down.
I’m not saying that’s what happens to all of you but you might as well want to check that, specially if your code used to work but no longer does.

UPDATE: The Corvid –which sounded for many as Covid that hiddeous disease– used to forget the Event Handlers each session, the Velo does no more. I have tried myself and this glitch or bug(?) no longer occurs to me, but you should check up just in case.

20

@marlowe(wix) any update on this please?