Create toggle button for price list

Hi.

I need to add a “monthly/annualy” button to a price list i’m creating.
Can someone tell me how do I build this button? should I use an HTML embedded code or is there some Webflow built-in solution?

Thank you,
Naama.

2 Likes

Hello @Naama!
If you build the price list within Webflow, I’d use the tabs widget for this occasion - two tab where one shows annual and the other monthly. That’s the best solution IMO.

Hello @StevenP,

Your solution is great! I have now 2 problems:

  1. when toggling, the whole table is being replaced, and i wanted only specific field to change. Is that doable?
  2. For some reason, in the “annual” state, I see both tables - monthly and annual. Do you have any idea why is that happening?

This is the website: http://folloze.webflow.io

Thank you very much,
Naama.

Hi @Naama,
I had the same issue once, and reason of my problem was that I messed up with positions values for tabs. Or there could be issues with interactions.

If you could share read-only link to your project, it would help us to find the problem faster. Guidance how to do this you can find here:
How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow

Regards,
Anna

Allright! Well, if you want to keep the tables intact, I’d go for interactions set on the annual/monthly buttons.
It’s a bit late here and I need to get up early for work tomorrow, but I’ll take a look tomorrow and I’ll write you a tutorial what you need to do!

Thank you both @sabanna and @StevenP !!!
This is the link to the website: https://preview.webflow.com/preview/folloze?preview=31edd4359289631f2e1377ff50294f22

Naama.

It is hard to explain with words, so I made this screen cast:
https://drive.google.com/file/d/0B-7cg8BSq1Z_ZmcwSXhWR0VJY2M/view?usp=drivesdk

Cheers,
Anna

1 Like

Your the best @sabanna!!! It works like a charm…
I really appreciate it.

Naama.

1 Like

You are welcome :slight_smile: Glad I was able to help

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.