Build shortcode functionality to show&hide Elementor Tabs when clicking CSS IDs

Scenario: In a standard Elementor Tabs element 6 tabs are added. The contents of Tab1 is a shortcode like: [dynamic_tabs svg="/wp-content/[login to view URL]" id_1="AreaA" group_1="2,3" default_1="2" id_2="AreaB" group_2="4,5,6" default_2="5"] For readability: dynamic_tabs svg="/wp-content/[login to view URL]" id_1="AreaA" group_1="2,3" default_1="2" id_2="AreaB" group_2="4,5,6" default_2="5"] ----- The shortcode works as follows: 1) Only Tab1 is shown, Tab2-Tab6 are hidden. 2) The named .svg file is shown in the Tab1 content area. It consists of a background image with layers on top. The layers have named CSS IDs, ex: "AreaA", "AreaB". 3) If a layer with ID="AreaA" is clicked, corresponding to "id_1" in the shortcode, the Tabs corresponding to "group_1" are shown, in this case Tab2 and Tab 3. The active tab is changed to the corresponding tab number in "default_1", in this case Tab2. Ans so on for "ID=AreaB", and any other "id, group, default" sets. 4) If the title of Tab1 is clicked, all other tabs are hidden again and the journey starts fresh. An example of sorts of this can be seen here: [login to view URL] All code will be placed within the plugin "Custom CSS & JS". ----------- I expect that you are experienced in setting a bid price that does not increase unless specifications change. I expect you to deliver on agreed deadlines, as you should expect me to answer any questions promptly. I expect all communications to occur on freelancer.com. I expect us both to communicate clearly in English.