Pricing table with switching option

[hiegl]

One of my clients would be very interested in pricing tables, that have this switching option, where you can switch prices. Is there any chance, that Impeka will get this? Would be a nice addition.

Thanks,
Bernhard

Topic

[Marius1989]

You can use tabs element in this case and remove the tab switch animation, so it is looking like only the price tag is swapped.
Quick and easy solution. Hope it helps.

[hiegl]

This is, what we already thought about. Unfortunately it does not have such a visual switcher.

[Marius1989]

A visual switcher needs a custom implementation, that’s right. Shouldn’t be too hard to achieve though.

[Marius1989]

That was actually I was also looking for – regarding some future projects, so I decided to exted my repository.
The only important thing for me was to use the original pricing table page builder element, so clients could make any changes on their own easily, without breaking anything.
It is only required to insert a single CSS class into the row.

The toggle itsself is HTML & CSS and 1 line of jQuery.
The function to switch the prices is another line of jQuery, so all in all very very leightweight.

Here is how I solved it (sorry for the bad quality, but I think it should be clear how it is designed).

View post on imgur.com

• This reply was modified 4 years, 4 months ago by Marius1989.
• This reply was modified 4 years, 4 months ago by Marius1989.

[hiegl]

Looks very good! Hopefully the team will consider to add something like that.

[Marius1989]

Thank you!
I agree, an in-built solution would also be great. So who knows, maybe it will be integrated at some time.

[hiegl]

Coming back to this: Could you probably give us here the code, that creates such a switcher. Or was the above just an image showing the look?

[Marius1989]

I actually quickly set it up for demo purposes but apparently I don’t have it anymore.
If you don’t have any idea where to start, you can find a lot of examples at codepen, etc.
This would be my recommendation for you in this case.

[hiegl]

Thanks anyway for your help. 🙂

[Author]

Replies