Change displayed price based on a button click

Question

Really hope someone can help with this.

I am building a site and need to be able to have people display a price based on their preferred option.

To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing

...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).

This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.

If anyone can help, I would be so so grateful.

Best wishes, and thanks for your time. AB.

Answer 1

// make the billing period selected tabs work
    $(function() {
      var $pricingTable = $('#pricing-table');
      $('#billing-picker .tab').click(function() {
        var $selectedTab = $(this);
        var selectedPeriod = $selectedTab.data('period-length');
        $('.tab').removeClass('selected');
        $selectedTab.addClass('selected');
        $pricingTable.removeClass().addClass(selectedPeriod);
      })
    });

This is the SCRIPT which does the selection of button ..

Answer 2

The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.

Answer 3

You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.

Have a look into the Jquery 'hide' method.

Hope that helps