Hi All! I’m trying to build an interaction “toggle” that switches between three states. You can visit the sample page at the bottom of this post, but essentially I want to switch between three states using interactions and display different menus on each page.
Sample Page: https://sample-4af740.webflow.io/
Read-only: https://preview.webflow.com/preview/sample-4af740?utm_medium=preview_link&utm_source=dashboard&utm_content=sample-4af740&preview=7f379ba5527a7e06cba03053ec126bc2&mode=preview
I solved the issue for anyone who may come across the problem in the future. I used the Move interaction and set my first position as X:0. The second button/div moved the block to X:100%, and the third moved it to X:203% (adjusted so it covers with the curved corners).
I don’t know exactly what you’re building, but this seems like a good opportunity to utilize tabs. Any reason why this wouldn’t work as a solution for you?
I found a decent solution, but I haven’t used Tabs much. Taking a look at them, they definitely would have worked for doing so, but I wanted the UI to “slide” from tab to tab. Managed to pull it off with the fix I gave, but I’ll migrate to tabs later if my version breaks. Thank you though!
Cool, glad you figured it out!