Tab 1 content
<!-- wp:greenshift-blocks/element {"id":"gsbp-e6681a7","dynamicGClasses":[{"value":"gs_tabs_585","type":"local","label":"gs_tabs_585","localed":false,"css":"","attributes":{"styleAttributes":{}},"originalBlock":"greenshift-blocks/element","selectors":[{"value":" .gs_tab","attributes":{"styleAttributes":{"fontSize":["1rem"],"backgroundColor":["#0000000d"],"borderCustom_Extra":true,"border":["none"],"paddingTop":["1rem"],"paddingBottom":["1rem"],"paddingRight":["1.5rem"],"paddingLeft":["1.5rem"],"fontWeight":["normal"],"textDecoration":["none"],"display":["flex"],"justifyContent":["center"],"alignItems":["center"],"color":["#000000"],"cursor":["pointer"],"columnGap":["10px"],"transition":["all 0.5s ease"]}},"css":".gs_tabs_585 .gs_tab{font-size:1rem;background-color:#0000000d;border:none;padding-top:1rem;padding-bottom:1rem;padding-right:1.5rem;padding-left:1.5rem;font-weight:normal;text-decoration:none;display:flex;justify-content:center;align-items:center;color:#000000;cursor:pointer;column-gap:10px;transition:all 0.5s ease;}"},{"value":" .gs_tab.active","attributes":{"styleAttributes":{"backgroundColor":["#000000"],"color":["#fff"]}},"css":".gs_tabs_585 .gs_tab.active{background-color:#000000;color:#fff;}"},{"value":" .gs_tab svg","attributes":{"styleAttributes":{"fill":["currentColor"],"width":["17px"],"height":["17px"]}},"css":".gs_tabs_585 .gs_tab svg{fill:currentColor;width:17px;height:17px;}"},{"value":" .gs_tab.active svg","attributes":{"styleAttributes":{"fill":["currentColor"]}},"css":".gs_tabs_585 .gs_tab.active svg{fill:currentColor;}"},{"value":" .gs_content","attributes":{"styleAttributes":{"overflow":["hidden"],"opacity":["0"],"maxHeight":["0px"],"transition":["opacity 0.5s cubic-bezier(0.42, 0, 0.58, 1), max-height 0.5s cubic-bezier(0.42, 0, 0.58, 1)"]}},"css":".gs_tabs_585 .gs_content{overflow:hidden;opacity:0;max-height:0px;transition:opacity 0.5s cubic-bezier(0.42, 0, 0.58, 1), max-height 0.5s cubic-bezier(0.42, 0, 0.58, 1);}"},{"value":" .gs_content.active","attributes":{"styleAttributes":{"opacity":["1"],"maxHeight":["5000px"]}},"css":".gs_tabs_585 .gs_content.active{opacity:1;max-height:5000px;}"},{"value":" .gs_content \u003e .gs_content_inner","attributes":{"styleAttributes":{"paddingTop":["25px"],"paddingRight":["25px"],"paddingBottom":["25px"],"paddingLeft":["25px"],"fontSize":["1rem"],"lineHeight":["1.7rem"]}},"css":".gs_tabs_585 .gs_content \u003e .gs_content_inner{padding-top:25px;padding-right:25px;padding-bottom:25px;padding-left:25px;font-size:1rem;line-height:1.7rem;}"}]},{"value":"gs_content_area","type":"local","label":"gs_content_area","localed":false,"css":".gs_tabs_585 .gs_content_area {\n position: relative;\n min-height: 150px; /* Optional: prevents layout collapse */\n}\n\n.gs_tabs_585 .gs_content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s ease-in-out;\n}\n\n.gs_tabs_585 .gs_content.active {\n opacity: 1;\n visibility: visible;\n position: relative;\n}","attributes":{"styleAttributes":{"customCSS_Extra":".gs_tabs_585 .gs_content_area {\n position: relative;\n min-height: 150px; /* Optional: prevents layout collapse */\n}\n\n.gs_tabs_585 .gs_content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s ease-in-out;\n}\n\n.gs_tabs_585 .gs_content.active {\n opacity: 1;\n visibility: visible;\n position: relative;\n}"}},"originalID":"gsbp-e6681a7","originalBlock":"greenshift-blocks/element","tag":"div","selectors":[]}],"type":"inner","className":"gs_tabs_585 gs_root gs_content_area","localId":"gsbp-e6681a7","styleAttributes":{"position":["relative"],"display":["flex"],"flexDirection":["column"],"alignItems":["stretch"],"justifyContent":["flex-start"]},"isVariation":"tabs"} -->
<div class="gs_tabs_585 gs_root gs_content_area gsbp-e6681a7"><!-- wp:greenshift-blocks/element {"id":"gsbp-2820b76","type":"inner","className":"gs_tabs_list","localId":"gsbp-2820b76","dynamicAttributes":[{"name":"role","value":"tablist"}],"styleAttributes":{"display":["flex"],"flexDirection":["row"],"columnGap":["15px"],"rowGap":["15px"],"flexWrap":["wrap"]},"isVariation":"tablist","metadata":{"name":"Tabs List Container"}} -->
<div class="gs_tabs_list gsbp-2820b76" role="tablist"><!-- wp:greenshift-blocks/element {"id":"gsbp-d2884a7","tag":"button","type":"inner","className":"gs_click_sync gs_tab active","localId":"gsbp-d2884a7","formAttributes":{"type":"button"},"dynamicAttributes":[{"name":"role","value":"tab"},{"name":"aria-selected","value":"true"}]} -->
<button class="gs_click_sync gs_tab active" type="button" role="tab" aria-selected="true"><!-- wp:greenshift-blocks/element {"id":"gsbp-0de8d7c","textContent":"Tab Title 1","tag":"span","className":"gs_name","localId":"gsbp-0de8d7c"} -->
<span class="gs_name">Tab Title 1</span>
<!-- /wp:greenshift-blocks/element --></button>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-4c26420","tag":"button","type":"inner","className":"gs_click_sync gs_tab","localId":"gsbp-4c26420","formAttributes":{"type":"button"},"dynamicAttributes":[{"name":"role","value":"tab"},{"name":"aria-selected","value":"false"}]} -->
<button class="gs_click_sync gs_tab" type="button" role="tab" aria-selected="false"><!-- wp:greenshift-blocks/element {"id":"gsbp-2924bf2","textContent":"Tab Title 2","tag":"span","className":"gs_name","localId":"gsbp-2924bf2"} -->
<span class="gs_name">Tab Title 2</span>
<!-- /wp:greenshift-blocks/element --></button>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-a389b03","tag":"button","type":"inner","className":"gs_click_sync gs_tab","localId":"gsbp-a389b03","formAttributes":{"type":"button"},"dynamicAttributes":[{"name":"role","value":"tab"},{"name":"aria-selected","value":"false"}]} -->
<button class="gs_click_sync gs_tab" type="button" role="tab" aria-selected="false"><!-- wp:greenshift-blocks/element {"id":"gsbp-a6097e2","textContent":"Tab Title 3","tag":"span","className":"gs_name","localId":"gsbp-a6097e2"} -->
<span class="gs_name">Tab Title 3</span>
<!-- /wp:greenshift-blocks/element --></button>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-a0e8ce0","type":"inner","className":"gs_content_area","localId":"gsbp-a0e8ce0","metadata":{"name":"Tabs Content Area"}} -->
<div class="gs_content_area"><!-- wp:greenshift-blocks/element {"id":"gsbp-3895f61","type":"inner","className":"gs_content active","localId":"gsbp-3895f61","dynamicAttributes":[{"name":"role","value":"tabpanel"},{"name":"aria-hidden","value":"false"}],"metadata":{"name":"Tabs Content Container"}} -->
<div class="gs_content active" role="tabpanel" aria-hidden="false"><!-- wp:greenshift-blocks/element {"id":"gsbp-4c09afb","type":"inner","className":"gs_content_inner","localId":"gsbp-4c09afb","metadata":{"name":"Tabs Content"}} -->
<div class="gs_content_inner"><!-- wp:paragraph -->
<p>Tab 1 content</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-7b9452a","type":"inner","className":"gs_content","localId":"gsbp-7b9452a","dynamicAttributes":[{"name":"role","value":"tabpanel"},{"name":"aria-hidden","value":"true"}],"metadata":{"name":"Tabs Content Container"}} -->
<div class="gs_content" role="tabpanel" aria-hidden="true"><!-- wp:greenshift-blocks/element {"id":"gsbp-2460604","type":"inner","className":"gs_content_inner","localId":"gsbp-2460604","metadata":{"name":"Tabs Content"}} -->
<div class="gs_content_inner"><!-- wp:paragraph -->
<p>Tab 2 content</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-20069b3","type":"inner","className":"gs_content","localId":"gsbp-20069b3","dynamicAttributes":[{"name":"role","value":"tabpanel"},{"name":"aria-hidden","value":"true"}],"metadata":{"name":"Tabs Content Container"}} -->
<div class="gs_content" role="tabpanel" aria-hidden="true"><!-- wp:greenshift-blocks/element {"id":"gsbp-0639d43","type":"inner","className":"gs_content_inner","localId":"gsbp-0639d43","metadata":{"name":"Tabs Content"}} -->
<div class="gs_content_inner"><!-- wp:paragraph -->
<p>Tab 3 content</p>
<!-- /wp:paragraph --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-4011a62","textContent":"\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', function () {\n const tabContainer = document.querySelector('.gs_tabs_585');\n if (!tabContainer) return;\n\n const tabs = tabContainer.querySelectorAll('.gs_tab');\n const contents = tabContainer.querySelectorAll('.gs_content');\n\n tabs.forEach((tab, index) =\u003e {\n tab.addEventListener('mouseenter', () =\u003e {\n // Remove active class from all tabs and contents\n tabs.forEach(t =\u003e {\n t.classList.remove('active');\n t.setAttribute('aria-selected', 'false');\n });\n contents.forEach(c =\u003e {\n c.classList.remove('active');\n c.setAttribute('aria-hidden', 'true');\n });\n\n // Activate hovered tab and corresponding content\n tab.classList.add('active');\n tab.setAttribute('aria-selected', 'true');\n contents[index].classList.add('active');\n contents[index].setAttribute('aria-hidden', 'false');\n });\n });\n});\n\u003c/script\u003e\n","tag":"code","localId":"gsbp-4011a62"} -->
<code><script>
document.addEventListener('DOMContentLoaded', function () {
const tabContainer = document.querySelector('.gs_tabs_585');
if (!tabContainer) return;
const tabs = tabContainer.querySelectorAll('.gs_tab');
const contents = tabContainer.querySelectorAll('.gs_content');
tabs.forEach((tab, index) => {
tab.addEventListener('mouseenter', () => {
// Remove active class from all tabs and contents
tabs.forEach(t => {
t.classList.remove('active');
t.setAttribute('aria-selected', 'false');
});
contents.forEach(c => {
c.classList.remove('active');
c.setAttribute('aria-hidden', 'true');
});
// Activate hovered tab and corresponding content
tab.classList.add('active');
tab.setAttribute('aria-selected', 'true');
contents[index].classList.add('active');
contents[index].setAttribute('aria-hidden', 'false');
});
});
});
</script>
</code>
<!-- /wp:greenshift-blocks/element -->