Pricing Table with Toggle Button for Elementor Pro

toggle-button.json

{"version":"0.4","title":"toggle-pricing-table","type":"section","content":[{"id":"7e71bb5a","settings":{"margin":{"unit":"px","top":"100","right":0,"bottom":"100","left":0,"isLinked":true}},"elements":[{"id":"1987f110","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"2c2912c1","settings":{"content_width":{"unit":"px","size":195,"sizes":[]},"height_inner":"min-height","custom_height_inner":{"unit":"px","size":55,"sizes":[]}},"elements":[{"id":"28eca408","settings":{"_column_size":100,"_inline_size":null,"content_position":"center","align":"space-around","background_background":"classic","background_color":"#E7E7E7","border_radius":{"unit":"px","top":"10","right":"10","bottom":"10","left":"10","isLinked":true},"_element_id":"toggle-01","custom_css":"selector {\n    cursor: pointer;\n}"},"elements":[{"id":"16108133","settings":{"button_type":"info","text":"-","size":"xs","button_text_color":"#ACAFEA","background_color":"#ACAFEA","border_radius":{"unit":"px","top":"5","right":"5","bottom":"5","left":"5","isLinked":true},"text_padding":{"unit":"px","top":"11","right":"11","bottom":"11","left":"11","isLinked":true},"_z_index":10,"_element_width":"initial","_element_custom_width":{"unit":"px","size":85,"sizes":[]},"_position":"absolute","_offset_x":{"unit":"px","size":0,"sizes":[]},"custom_css":"selector a {\n    width:100%;\n}\n\nselector {\n    pointer-events: none;\n    transition: ease-in 0.2s;\n}"},"elements":[],"isInner":false,"widgetType":"button","elType":"widget"},{"id":"13f160db","settings":{"title":"Monthly","header_size":"span","typography_typography":"custom","typography_font_family":"Roboto","typography_font_size":{"unit":"px","size":14,"sizes":[]},"typography_font_weight":"normal","_z_index":20,"_element_width":"auto","custom_css":"selector {\n    pointer-events: none;\n}"},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"},{"id":"2793dc07","settings":{"title":"Yearly","header_size":"span","typography_typography":"custom","typography_font_family":"Roboto","typography_font_size":{"unit":"px","size":14,"sizes":[]},"typography_font_weight":"normal","_z_index":20,"_element_width":"auto","custom_css":"selector {\n    pointer-events: none;\n}"},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"}],"isInner":true,"elType":"column"}],"isInner":true,"elType":"section"},{"id":"418fb79a","settings":{"content_width":{"unit":"px","size":600,"sizes":[]},"structure":"20","margin":{"unit":"px","top":"50","right":0,"bottom":"50","left":0,"isLinked":true},"_element_id":"yearly-package"},"elements":[{"id":"176d88df","settings":{"_column_size":50,"_inline_size":null},"elements":[{"id":"6d079c3","settings":{"heading":"Basic","sub_heading":"Something Basic","price":"199","period":"Yearly","features_list":[{"item_text":"List Item #1","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"5bb78fb","item_icon_color":""},{"item_text":"List Item #2","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"646b792","item_icon_color":""},{"item_text":"List Item #3","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"1dccec4","item_icon_color":""}],"button_text":"Click Here","footer_additional_info":"This is text element","ribbon_title":"Popular"},"elements":[],"isInner":false,"widgetType":"price-table","elType":"widget"}],"isInner":true,"elType":"column"},{"id":"1748664a","settings":{"_column_size":50,"_inline_size":null},"elements":[{"id":"728c26d2","settings":{"heading":"Premium","sub_heading":"Better and Faster","price":"399","period":"Monthly","features_list":[{"item_text":"List Item #1","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"5bb78fb","item_icon_color":""},{"item_text":"List Item #2","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"646b792","item_icon_color":""},{"item_text":"List Item #3","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"1dccec4","item_icon_color":""}],"button_text":"Click Here","footer_additional_info":"This is text element","show_ribbon":"","ribbon_title":"Popular","header_bg_color":"#8889C9"},"elements":[],"isInner":false,"widgetType":"price-table","elType":"widget"}],"isInner":true,"elType":"column"}],"isInner":true,"elType":"section"},{"id":"2ddf89b0","settings":{"content_width":{"unit":"px","size":600,"sizes":[]},"structure":"20","margin":{"unit":"px","top":"50","right":0,"bottom":"50","left":0,"isLinked":true},"_element_id":"monthly-package"},"elements":[{"id":"3cffe56d","settings":{"_column_size":50,"_inline_size":null},"elements":[{"id":"26622db2","settings":{"heading":"Basic","sub_heading":"Something Basic","price":"19","period":"Monthly","features_list":[{"item_text":"List Item #1","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"5bb78fb","item_icon_color":""},{"item_text":"List Item #2","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"646b792","item_icon_color":""},{"item_text":"List Item #3","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"1dccec4","item_icon_color":""}],"button_text":"Click Here","footer_additional_info":"This is text element","ribbon_title":"Popular"},"elements":[],"isInner":false,"widgetType":"price-table","elType":"widget"}],"isInner":true,"elType":"column"},{"id":"4ed3067a","settings":{"_column_size":50,"_inline_size":null},"elements":[{"id":"10729bc8","settings":{"heading":"Premium","sub_heading":"Better and Faster","price":"39","period":"Monthly","features_list":[{"item_text":"List Item #1","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"5bb78fb","item_icon_color":""},{"item_text":"List Item #2","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"646b792","item_icon_color":""},{"item_text":"List Item #3","selected_item_icon":{"value":"far fa-check-circle","library":"fa-regular"},"_id":"1dccec4","item_icon_color":""}],"button_text":"Click Here","footer_additional_info":"This is text element","show_ribbon":"","ribbon_title":"Popular","header_bg_color":"#8889C9"},"elements":[],"isInner":false,"widgetType":"price-table","elType":"widget"}],"isInner":true,"elType":"column"}],"isInner":true,"elType":"section"},{"id":"e6ce2a9","settings":{"html":"<script>\n    \nfunction toggle_button(btn, el1, el2){\n\n    var sw = btn.getElementsByClassName('elementor-widget-button')[0];\n    \n    if ((sw.style.left == '0px') || (sw.style.left == '')) {\n        sw.style.left = '90px';\n    } else {\n        sw.style.left = '0px';\n    }\n    \n    if (el1.style.display == 'none') {\n        el1.style.display = 'block';\n        el2.style.display = 'none';\n    } else {\n        el1.style.display = 'none';\n        el2.style.display = 'block';\n    }\n}    \n<\/script>"},"elements":[],"isInner":false,"widgetType":"html","elType":"widget"},{"id":"befdca5","settings":{"html":"<script>\r\n\r\nwindow.addEventListener(\"load\", function(){\r\n    \r\n    var monthly = document.getElementById('monthly-package');\r\n    var yearly = document.getElementById('yearly-package');\r\n    var btn01 = document.getElementById('toggle-01');\r\n    \r\n    yearly.style.display = 'none';\r\n    \r\n    btn01.addEventListener(\"click\",function(){\r\n        toggle_button(btn01, monthly, yearly);\r\n    });\r\n});\r\n\r\n<\/script>"},"elements":[],"isInner":false,"widgetType":"html","elType":"widget"}],"isInner":false,"elType":"column"}],"isInner":false,"elType":"section"}],"page_settings":{"eael_ext_toc_title":"Table of Contents"}}