A short YouTube tutorial (presented by Matt) that demonstrates how to build a Monthly/Annual (or multi-plan) toggle in ClickFunnels using the platform's show/hide elements. Matt explains that buttons (styled as text links) can be configured to hide or show entire sections, rows, elements, headlines and dividers; the demo uses four-column rows to create pricing columns and switches instantly between annual and monthly views. Links to a fuller tutorial and CF Pro Tools bonus are provided in the description.
Chapters
Hey, it's Matt again. Did you know that it's possible to do a little toggle back and forth for like an annual discount and then monthly plans like this? Most people don't realize that you can do something kind of cool like this and have multiple plans on the page. You could do this with as many plans as you want. Maybe you have annual, quarterly, monthly, daily, whatever it is. Maybe you just want to organize shirts and they're different colors and different stuff, right? So you can do this with multiple different things. Using the show hide elements part of using ClickFunnels 1.0 or in 2.0. Now I've actually created an entire tutorial on how to do this. I'll link everything you need down below in the description. But for now, what you need to know is that all you really have to do. There's a function inside of clickfunnels that allows you to show sections, elements and rows and hide sections, rows and elements when a particular element is clicked on. So that means that when you create a button, these are actually buttons right here. They're just. They don't look like buttons like you would expect a button to look like this. They just look like regular buttons because they have. They blend in with the background and the border has been removed. So it looks like a text link. And then this is a four column row. So you can see that each row is customized. It looks like a pricing table. You could use a pricing table if you wanted, but these guys are just using a customized column. So there are four columns. Now, the way that this works, this is a section right here with a four column row. We've already talked about that. And this is another section with a four column row. So when you click on annual discount or monthly plans, what it's doing is it's hiding the annual section and it's hiding the annual little divider underneath there. The whichever one is actually selected, it's actually darker right when you click on annual discount, because again, that's a button, what is really doing is hiding the other section and hiding the other headline and hiding the other divider. But it's also at the same time showing the annual section, showing the annual bold headline and showing the annual divider right here. So when you click on it, it does everything instantaneously. It looks much more cleaner, much more organized, looks really nice. And it gives the customer, you know, they can look back and forth and interact with your site. So instead of having a product selector with a whole bunch of product ideas in there and a whole bunch of different things and making it look very unorganized. This is the best way to organize that and make it look really nice, make it look effective. And you can still have a little mini stack inside of these columns to show people what it is that you're buying. So if you guys want to see more about how to build this, I'll leave the links down in the description that is provided as an exclusive bonus inside of CF Pro Tools. So I'll leave the links to get access to that. Okay. If you have any questions, leave them down in the comments. I'll see you guys in another video. Take care.
