Beginner

$10 per month
  • Basic Services
  • Lots of Fun
  • Minimal Features
Get Started

Intermediate

$29 per month
  • More Services
  • Lots of Fun
  • More Features
Get Started

Advanced

$47 per month
  • Complete Services
  • Lots of Fun
  • Most Features
Get Started

Beginner

$25 per Quarter
  • Basic Services
  • Lots of Fun
  • Minimal Features
Get Started

Intermediate

$80 per quarter
  • More Services
  • Lots of Fun
  • More Features
Get Started

Advanced

$125 per quarter
  • Complete Services
  • Lots of Fun
  • Most Features
Get Started

Beginner

$97 per year
  • Basic Services
  • Lots of Fun
  • Minimal Features
  • Save $$$ on Yearly pricing
Get Started

Intermediate

$300 per year
  • More Services
  • Lots of Fun
  • More Features
  • Save $$$ on Yearly pricing
Get Started

Advanced

$500 per year
  • Complete Services
  • Lots of Fun
  • Most Features
  • Save $$$ on yearly pricing
Get Started

Beginner

$450 5 year Plan
  • Basic Services
  • Lots of Fun
  • Minimal Features
  • Save $$$ on Yearly pricing
Get Started

Intermediate

$1000 5 year Plan
  • More Services
  • Lots of Fun
  • More Features
  • Save $$$ on Yearly pricing
Get Started

Advanced

$2000 5 year Plan
  • Complete Services
  • Lots of Fun
  • Most Features
  • Save $$$ on yearly pricing
Get Started

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); });