www.pixeto.cocloneable
Watch How to Setup

Monthly-Annual Pricing Toggle Webflow

(with code)
Monthly billing
Annual billing
Basic plan
$10
per month
Basic features for up to 10 users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support
Business Plan
$20
per month
Growing teams up to 20 users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support
Enterprise Plan
$40
per month
Advanced features + unlimited users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support

Watch how to Setup

Set up

1. Add this Code before closing /body tag

	
   <script>
   
  $(document).ready(function () {
  var clicknum = 0;

  $('#packageSwitch').click(() => {
    // Toggle the pricing text 
    $('.text_1-5.per_month').each(function () {
      var $this = $(this);
      var newText = (clicknum % 2 === 0) ? "per year" : "per month";
      $this.text(newText);
    });

    
    clicknum++;

    // Toggle the number animation 
    $('.number').each(function () {
      var $this = $(this);
      var countTo = (clicknum % 2 === 0) ? $this.attr('data-month') : $this.attr('data-year');

      $({ countNum: $this.text() }).animate({
        countNum: countTo
      },
      {
        duration: 500,
        easing: 'linear',
        step: function (now) {
          $this.text(Math.round(now.toFixed(2)));
        },
        complete: function () {
          $this.text(this.countNum);
        }
      });
      });
    });
  });

    
   </script>

2. Set up the toggle switch

Go ahead and add an ID = "packageSwitch" to the Toggle switch.

This code is a JavaScript script that uses the jQuery library. It sets up an event listener for a click on an element with the ID "packageSwitch" and defines what should happen when that element is clicked.

3. Set up Attributes to the pricing number

Add these attributes to the Pricing number of the build
(you have to add both attributes )

Name=data-month
Value= (your monthly pricing here)

Name=data-year
Value= (your yearly pricing here)
‍

In this code, the "data-month" and "data-year" attributes are used to store numeric values that are used in the jQuery animation. When the user clicks on the "packageSwitch" element, the script reads the values of these attributes for all elements with the "number" class, and then animates the displayed value of those elements from "data-year" to "data-month" or from "data-month" to "data-year", depending on the value of the "clicknum" variable.

4. Add the webflow animaiton to the switch

Add the toggle switch animation from the interaction pannel in the designer.
‍

This is a simple and basic webflow interection which targets the circle to move and make the animation happen. Also it effects the changing of the buttons too, so that you can put different links to the buttons while changing from monthly to yearly plane.

Monthly-Annual Pricing Toggle Webflow

(without code)
Monthly billing
Annual billing
Basic plan
$10
per month
Basic features for up to 10 users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support
Business Plan
$20
per month
Growing teams up to 20 users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support
Enterprise Plan
$40
per month
Advanced features + unlimited users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support
Basic plan
$99
per year
Basic features for up to 10 users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support
Basic plan
$199
per year
Basic features for up to 10 users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support
Basic plan
$299
per year
Basic features for up to 10 users.
Get started
FEATURES
Everything in our free plan plus....
  • Access to basic features
  • Basic reporting and analytics
  • Up to 10 individual users
  • 20GB individual data each user
  • Basic chat and email support

Set up

Webflow's native setup for pricing sections is incredibly user-friendly and straightforward. By utilizing tabs, we're able to easily organize and showcase our pricing plans. On one tab, you can find our monthly pricing cards, while on the other tab, we've set up the yearly pricing cards. This setup is perfect for those who prefer a code-free approach or want to quickly create a functional pricing section without any hassle.

In addition, this setup is perfect for those using Webflow templates, as they often don't allow the use of custom code. With our simple and effective native pricing setup, you can easily create stunning pricing sections that perfectly match your website's overall design aesthetic.

Made with ❤️ by Pixeto.co