Wordpress pricing table with toggled views!

Easily create a pricing table (or really anything else for that matter) that has two views and control those views with a modern toggle.
Intro: 0:00
Designing: 1:18
Toggle: 10:22
Toggle Styles: 11:45
Togge Functionality: 15:02
CodePen work by Matt Smith: codepen.io/AllThingsSmitty/pe...
Javascript: buildingonwp.com/resources/wo...
// Hide the annual section by default
const annualSection = document.getElementById('annual');
annualSection.style.display = 'none';
// Listen for changes to the checkbox
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
// Show the annual section and hide the monthly section
annualSection.style.display = 'block';
const monthlySection = document.getElementById('monthly');
monthlySection.style.display = 'none';
} else {
// Show the monthly section and hide the annual section
const monthlySection = document.getElementById('monthly');
monthlySection.style.display = 'block';
annualSection.style.display = 'none';
}
});

[@zvonema]

This video is what i was looking for, excellently explained!

[@buildingonwordpress]

🎉

[@andersbrathen]

This is just so useful. Perfectly executed. Thanks 👍🏼

[@buildingonwordpress]

Thanks! Hopefully you get some use out of this concept!

[@RethinkMyBusiness]

Got the two tables built out, button added, now I can't get the JS to work. :| Any other tips @buildingonwordpress ?

[@CharlesHutchinson]

Hey Josh... Just a thought. If this WordPress gig goes south, you would do great in radio or broadcasting. Just a thought. Thanks for the great videos.

[@buildingonwordpress]

Hey! Thanks :) Funny, I do keep hearing that I've got a face for radio :p

[@Lensbreak]

You cleary missed out the AI revolution going on in front of your door

[@larrybradshaw992]

Can a toggle be used to navigate to another page instead of a hidden section? I wanted to have a hidden section but found out that you can only use FacetWP on one page query and not two together. :(

[@buildingonwordpress]

Hm... I'm sure you could use some javascript to load a new url when the toggle is in an active or inactive position.

[@FinchAdventures]

It would be really cool if you could figure out a way to build a customer queue for a web design business. Maybe using ACF?

[@Lensbreak]

You should not duplicate the content. Bad for SEO, bad for maintaining and avoid error. Why not just use javascript to change the pricing and change the buttonlink for checkout? Something that can be done in 2min you do in 18min LOL

[@monkiBable]

is it possible to do it in gutenberg ?

[@buildingonwordpress]

Hi @monkibable - not sure on the specifics but the same principles apply: add div with check mark markup, style with css change content with JavaScript.