Hi,
My expand and collapse code is not working in my mobile view.
My code is below:
$w.onReady( function () {
//TODO: write your page related code here…
$w(‘#HeaderTransitionPoint’).onViewportLeave(() => {
$w(‘#scrollingheaderstrip’).expand();
$w(‘#shoppingCartIcon11’).expand();
$w(‘#defaultheaderstrip’).collapse();
$w(‘#shippingheaderstrip’).collapse();
$w(‘#shoppingCartIcon10’).collapse();
})
$w(‘#HeaderTransitionPoint’).onViewportEnter(() => {
$w(‘#defaultheaderstrip’).expand();
$w(‘#shoppingCartIcon10’).expand();
$w(‘#shippingheaderstrip’).expand();
$w(‘#scrollingheaderstrip’).collapse();
$w(‘#shoppingCartIcon11’).collapse();
})
Have I done something wrong?
Cheers
Kylie
As it is on the mobile version and you have probably setup your code to run on all devices of desktop, tablet and mobile, then check that you haven’t got any hidden elements in the mobile editor itself, as mentioned in this previous forum post.
https://www.wix.com/corvid/forum/community-discussion/problems-with-my-expand-collapse-items-in-mobile-view
Also, remember that mobile versions will differ in size on different users mobile devices, so the onViewport might function well on desktop, however it won’t work on mobile as the viewport area is always displayed etc.
Have a read of this page and see how expand and collapse affects things on the page.
https://support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size#rules-for-collapsing-and-expanding-elements-1
However, the easiest and best way to do this is to write code for each device by using the Wix Window API and the formFactor function.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
See these pages for more info.
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
See previous forum posts too for more info.
https://www.wix.com/corvid/forum/community-discussion/collapse-on-desktop-and-uncollapse-on-mobile
Finally, you can also look at using your own mobile menu as shown in these pages here.
https://support.wix.com/en/article/customizing-your-mobile-menu-4726130
https://www.wix.com/corvid/forum/corvid-tips-and-updates/introducing-the-new-mobile-menu