Streaming live at 10am (PST)

Three-Way State Toggle

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!

1 Like

Cool, glad you figured it out!

1 Like