[Resolved] How To Make a Toggle Switch Pricing Table

Home Forums Support [Resolved] How To Make a Toggle Switch Pricing Table

Home Forums Support How To Make a Toggle Switch Pricing Table

  • This topic has 3 replies, 2 voices, and was last updated 2 months ago by Elvin.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2020625
    Olivier

    Hello,

    How To Make a Toggle Switch Pricing Table using GeneratePress Premium and GenerateBlocks Pro with a clean and light code please? Price table with monthly/annual button, example

    Thanks πŸ™‚

    Best regards.

    #2020697
    Elvin
    Staff
    Customer Support

    Hi Olivier,

    This is possible with a bit of custom JS.

    Here’s what you can do:

    1.) Create the button layout for toggle. Add an HTML anchor to the buttons. (example: annual-price, monthly-price.) Add class as well (example: price-toggle-btn)
    2.) Create the grid layout for the first tab and second tab to be toggled. Add class to both of their wrapper containers (example: price-table ). Add an HTML anchor to their container wrappers as well. (example: annual-price-table, monthly-price-table.)

    After making layout, add this CSS:

    .price-tables.active-tab { display: flex; }
    .price-tables { display: none; }

    and then hook this script on the wp_footer of the site. (you can do this with Hook Element).

    <script>
    let pricing_toggle_btn = document.querySelectorAll('.price-toggle-btn');
    let PriceTables = document.getElementsByClassName('price-tables');
    
    function toggle_price_handle_click(evt) {
        for (var y = 0; y < pricing_toggle_btn.length; y++) { 
            if ( pricing_toggle_btn[y] == evt.target ) {
    					evt.preventDefault();
    					targetElement = document.querySelector(evt.target.hash+'-table');
    					remove_active_tables();
              targetElement.classList.add('active-tab');
                
            }
        }
    }
    	
    function remove_active_tables() {
        for (var i = 0; i < PriceTables.length; i++) { 
          PriceTables.classList.remove('active-tab');
        }
    }
    
    window.addEventListener("click", toggle_price_handle_click);
    	
    </script>

    Note: If you want one of the tables to display by default, add active-tab on its additional CSS.

    A wise man once said:
    "Have you cleared your cache?"

    #2020703
    Olivier

    Hi Elvin,

    Thanks πŸ™‚

    Best regards.

    #2020705
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.