How do you create the toggle pricing table with fade effect? Here is the tutorial for you.

Creating the Pricing Table with Buttons

See the video for complete settings.

Adding Custom CSS

Open the style.css file and add this small CSS code there.

CSS

body:not(.fl-builder-edit) .pt {
    display: none;
}

Creating Toggle Pricing Table JS Script

Create a new file “toggle.pricing.table.js” and save into your child themes “js” folder. I am sharing the two JS codes of this file. You will add the script into the file based on Beaver Builder plugin’s version.

Snippet for BB 2.0.x version

toggle-pricing-table.js

(function($, FLBuilder){
    togglePT = {
        init: function()
        {
           if( $('body').hasClass('fl-builder-edit') )
            return;
            
           $('.pt-monthly').fadeToggle(900); 
        },
        
        showTable: function(obj)
        {
            var txt = obj.context.innerText;
            $('.pt').removeAttr('style');
            $('.pt-' + txt.toLowerCase()).fadeToggle(1200);
        }
    };
    
    $(function(){
        FLBuilder.addHook('didPublishLayout', togglePT.init );
        togglePT.init();
        $('.btn-monthly, .btn-quarterly, .btn-yearly').on('click', function(){
            togglePT.showTable($(this));
        }); 
    });
})(jQuery, FLBuilder);

Snippet for BB 1.0.x version

toggle-pricing-table.js

(function($){
    togglePT = {
        init: function()
        {
           if( $('body').hasClass('fl-builder-edit') )
            return;
            
           $('.pt-monthly').fadeToggle(900); 
        },
        
        showTable: function(obj)
        {
            var txt = obj.context.innerText;
            $('.pt').removeAttr('style');
            $('.pt-' + txt.toLowerCase()).fadeToggle(1200);
        }
    };
    
    $(function(){
        togglePT.init();
        $('.btn-monthly, .btn-quarterly, .btn-yearly').on('click', function(){
            togglePT.showTable($(this));
        }); 
    });
})(jQuery);

Enqueue the Above JS file

Open the functions.php file of your active theme and add the following PHP snippets.

Enqueue JS File

add_action('wp_enqueue_scripts', 'probb_toggle_pricing_table');
function probb_toggle_pricing_table()
{
       wp_enqueue_script('toggle-pricing-table', get_stylesheet_directory_uri() . '/js/toggle.pricing.table.js', array(), '4.8.2', true);
}