Bricksextras: Modify tab tab Pro so that the tab remains open when the browser is reloaded

Problem:

If you create different tabs in Tabreiter Pro and reload the page, only the 1st tab is opened. For an improved UX, it would be nice if the last tab opened remained open.

Solution:

1. Switch on Hash URL in Pro Tabs (Open via URL parameter), GET parameter = tab
2. Pro Tabs comes with its own JavaScript events. We need the "x_tabs:switch" event.
3. The following code (initialisation in the footer and if possible only on pages in which the tabs also appear:
   

document.addEventListener("DOMContentLoaded", () => {
    const tabs = document.getElementById("myProTabsID");
    if (tabs) {
        tabs.addEventListener("x_tabs:switch", () => {
            const activeTabPanel = tabs.querySelector(".x-tabs_panel-current");
            if (activeTabPanel && activeTabPanel.id) {
                const activeTabId = activeTabPanel.id;
                const url = new URL(window.location); // Retrieve current URL
                url.searchParams.set('tab', activeTabId); // Set GET parameter 'tab'
                window.history.pushState({}, "", url); // Update URL without reloading
            }
        });
    }
});Code language: JavaScript (javascript)

Replace myProTabsID with the ID of the root element of "Pro Tabs"