I am trying to code an interaction so that when an element is clicked in mobile it disappears and shows a different element. I’ve found in the forum how to code an element to show when it is being viewed on mobile, but not how to be shown after a click. Thanks for any and all help!
Simple, have both elements in the only show on mobile code, however only set the first element as show.
Then when the user clicks on that element have the other element show and the existing element hide in the onclick function of the first element.
https://www.wix.com/code/reference/$w.Button.html#onClick
https://support.wix.com/en/article/wix-code-tutorial-displaying-elements-in-mobile-only
This works perfectly, however it only works on published site.
IT DOES NOT SHOW CORRECTLY ON PREVIEW.
ADD TO SITE TAB SO IT WORKS ACROSS SITE AND NOT JUST PAGE ONLY.
Hey @rdlesser ,
Working with the properties panel is simple Wix Code basics …
Check out one of my first (super old) videos that explains how to add that onClick function on an element …
https://www.youtube.com/watch?v=4K-p2pO3IkA&t=378s
(This video is over 1.5 yrs old so please excuse my … everything, lol. I was at an extremely early code level at this point but had a lot of fun getting to where I am now.)
I think I’ve got it! Seems like I don’t even need to use the wix window module since the interaction wouldn’t be able to happen in desktop. I need one of the elements to show in desktop also, so couldn’t have it just appear in mobile as givemeawhisky suggested (if I’m interpreting the comment correctly).
I know how to use the properties panel and onClick function, just didn’t know how to integrate it with the wix window mobile module since the export function needed to be listed higher than import, and as an extremely novice coder I didn’t know how to work around this.
Thanks for everyone’s suggestions!
Unfortunately, now I’m running into another issue where the code is not working in the preview screen. I know it works because it did before, but when I add more code it stops working, and even if I delete everything to just have the original code that works, nothing happens in the preview window
If you want to combine the both , you can try using this tutorial for an example.
https://support.wix.com/en/article/wix-code-writing-code-that-only-runs-on-mobile-devices
https://www.wix.com/code/reference/wix-window.html
Remember you need to publish your site and try it on mobile device and not just through preview.
@givemeawhisky thanks for these links! That first one is definitely what I’ve been looking for but could only find this https://support.wix.com/en/article/wix-code-tutorial-displaying-elements-in-mobile-only