Monthly Year Pricing Table with BB – Beaver Builder Sandbox

Monthly / Quarterly / Yearly / 5 Year Plan

Beginner

$10per month

Basic Services
Lots of Fun
Minimal Features

Intermediate

$29per month

More Services
Lots of Fun
More Features

Advanced

$47per month

Complete Services
Lots of Fun
Most Features

Beginner

$25per Quarter

Basic Services
Lots of Fun
Minimal Features

Intermediate

$80per quarter

More Services
Lots of Fun
More Features

Advanced

$125per quarter

Complete Services
Lots of Fun
Most Features

Beginner

$97per year

Basic Services
Lots of Fun
Minimal Features
Save $$$ on Yearly pricing

Intermediate

$300per year

More Services
Lots of Fun
More Features
Save $$$ on Yearly pricing

Advanced

$500per year

Complete Services
Lots of Fun
Most Features
Save $$$ on yearly pricing

Beginner

$4505 year Plan

Basic Services
Lots of Fun
Minimal Features
Save $$$ on Yearly pricing

Intermediate

$10005 year Plan

More Services
Lots of Fun
More Features
Save $$$ on Yearly pricing

Advanced

$20005 year Plan

Complete Services
Lots of Fun
Most Features
Save $$$ on yearly pricing

Here's my CSS

/* Hides all pricing tables except 1st one */ .fl-module-pricing-table {display: none;} #pt1 {display:block;} /* Display all tables when Editing */ .fl-builder-edit .fl-module-pricing-table {display: block;} /* Set size of Toggle text */ .pt1, .pt2, .pt3, .pt4 {font-size: small;} .selected {font-size: x-large;}

Here's my jQuery

var counter=1; jQuery("#PricingTableToggle").on("click",function (e) { e.preventDefault(); counter++; if ( counter > 4 ) { counter = 1; } jQuery("#pt1,#pt2,#pt3,#pt4").hide(); jQuery("#pt"+(counter)).show(); jQuery(".pt1,.pt2,.pt3,.pt4").removeClass("selected"); jQuery(".pt"+(counter)).addClass("selected"); // echo val(counter); });