{"id":32055,"date":"2025-02-04T01:41:16","date_gmt":"2025-02-04T00:41:16","guid":{"rendered":"https:\/\/mainetcare.de\/?post_type=techdoc&#038;p=32055"},"modified":"2026-07-14T11:35:16","modified_gmt":"2026-07-14T09:35:16","slug":"modify-bricksextras-tab-tab-pro-so-that-the-tab-remains-open-when-the-browser-is-reloaded","status":"publish","type":"gartenschuppen","link":"https:\/\/mainetcare.de\/en\/gartenschuppen\/bricksextras-tabreiter-pro-so-modifizieren-dass-bei-reload-des-browsers-der-tabreiter-offen-bleibt\/","title":{"rendered":"Bricksextras: Modify tab tab Pro so that the tab remains open when the browser is reloaded"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Problem:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution:<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Activate hash URL in Pro Tabs (Open via URL parameter), GET parameter = tab<\/li>\n\n\n\n<li>Pro Tabs comes with its own JavaScript events. We need the \"x_tabs:switch\" event. <\/li>\n\n\n\n<li>The following code (initialization in the footer and if possible only on pages in which the tabs also appear:<br><\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">\"DOMContentLoaded\"<\/span>, () =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> tabs = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"myProTabsID\"<\/span>);\n    <span class=\"hljs-keyword\">if<\/span> (tabs) {\n        tabs.addEventListener(<span class=\"hljs-string\">\"x_tabs:switch\"<\/span>, () =&gt; {\n            <span class=\"hljs-keyword\">const<\/span> activeTabPanel = tabs.querySelector(<span class=\"hljs-string\">\".x-tabs_panel-current\"<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (activeTabPanel &amp;&amp; activeTabPanel.id) {\n                <span class=\"hljs-keyword\">const<\/span> activeTabId = activeTabPanel.id;\n                <span class=\"hljs-keyword\">const<\/span> url = <span class=\"hljs-keyword\">new<\/span> URL(<span class=\"hljs-built_in\">window<\/span>.location); <span class=\"hljs-comment\">\/\/ Retrieve current URL<\/span>\n                url.searchParams.set(<span class=\"hljs-string\">'tab'<\/span>, activeTabId); <span class=\"hljs-comment\">\/\/ Set GET parameter 'tab'<\/span>\n                <span class=\"hljs-built_in\">window<\/span>.history.pushState({}, <span class=\"hljs-string\">\"\"<\/span>, url); <span class=\"hljs-comment\">\/\/ Update URL without reloading<\/span>\n            }\n        });\n    }\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Replace myProTabsID with the ID of the root element of \"Pro Tabs\"<\/p>","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"class_list":["post-32055","gartenschuppen","type-gartenschuppen","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/gartenschuppen\/32055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/gartenschuppen"}],"about":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/types\/gartenschuppen"}],"wp:attachment":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/media?parent=32055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}