Pricing Page with Tabs

Earlier this week, I asked on the Facebook group about options for Pricing Page Templates from Wix and ended up deciding to design my own. This was not a simple job, due to 4 different options that required pricing. Courtesy of Wix Code and some assistance from the awesome Wix Staff who answered my “changing text color” question, I have 4 pricing tabs that, when you click on them: their color changes, a line appears underneath so you know it is selected, the pricing guide for that option expands, and all the other options return to default settings. Here are some screen shots of two of the tabs in action . . .

Did I mention I am LOVING Wix Code??


I love it, thanks for sharing!
How did you switch the plans? Using gallery slides or just showing and hiding containers?

1 Like

I used containers and collapsed or expanded them. The lines are show/hide.

1 Like

That’s great. I need to figure out this Wix Code. I get some of it but there always seems to be a little glitch I just can’t get past with my skill level. Is there a place on a Wix Forum where people share the actual code so dummies like me can plug it into a sandbox page and play with it to learn?

Hi Kevin,
You can look at our examples and various code articles to get you started.
You can always post your question and someone from the community will try to help.
If it’s something bigger, I know there are some members here you can hire for projects.
Good luck!

Whats is the site url to see it?

How do I find a developer that can build out a wix site using wix code? Could you point me to a form or to someone that does contract work?

Hi there, this looks great! I’m looking at doing a page with Tabs and all I could find was the Buttons/Slideshow system which doesn’t allow you to highlight the selected tab. Can you explain a bit more about this containers system? Or point me to a link/tutorial on how to implement this? Thanks!

If you want it to look like its highlighted, then you have to design it that way. You could also add code to change the style of the element.

Not all elements are compatible to change the style via code.

Some people like to layer 2 elements on top of each and simply hide or show the correct one after a click action happens so it simulates the effect that something is being highlighted.