<script>
document.addEventListener('DOMContentLoaded', function () {
    // Alle subtab knoppen
    const subtabs = document.querySelectorAll('.m-popup-subtab');
    // Alle field groups van display
    const groups = {
        preset: document.querySelector('.acf-field-group[data-name="display_preset_group"]'),
        style: document.querySelector('.acf-field-group[data-name="display_style_group"]'),
        size: document.querySelector('.acf-field-group[data-name="display_size_group"]'),
        animation: document.querySelector('.acf-field-group[data-name="display_animation_group"]'),
        position: document.querySelector('.acf-field-group[data-name="display_position_group"]'),
    };

    console.log(groups);
    // Functie om groepen te toggelen
    function showGroup(tab) {
        for (let key in groups) {
            if (!groups[key]) continue;
            groups[key].style.display = (key === tab) ? 'block' : 'none';
        }

        console.log('function showGroup called with tab: ' + tab);
    }

    // Voeg click event toe aan elke subtab
    subtabs.forEach(function(tabBtn){
        tabBtn.addEventListener('click', function(){
            // active class
            subtabs.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');

            // toon juiste groep
            const tabName = this.getAttribute('data-tab');
            showGroup(tabName);
        });

        console.log('clickEvent' + tabBtn.getAttribute('data-tab'));
    });

    // Init: toon preset groep standaard
    showGroup('preset');
    const firstTab = document.querySelector('.m-popup-subtab[data-tab="preset"]');
    const fieldGroep = document.querySelector('.acf-field-group[name="group_display_preset"]');
    if (firstTab) firstTab.classList.add('active');
    if (fieldGroep) fieldGroep.style.display = 'block';
    


});

</script>

<style>
    .acf-fields.inside {
        min-height: 500px !important;
    }
    .acf-field-display-subtabs {
        padding-top: 0 !important;
    }
    .m-popup-subtabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    }
    .m-popup-subtab {
        padding: 5px 10px;
        color: black;
        cursor: pointer;
    }
    .m-popup-subtab.active {
        color: #0073aa;
    }

    .acf-field-group {
        display: none;
    }
    .acf-field-group.active {
        display: block;
    }
</style>
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//stephanie.dev.madeit.be/wp-content/plugins/wordpress-seo/css/main-sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/post-sitemap.xml</loc>
		<lastmod>2025-05-13T10:55:24+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/page-sitemap.xml</loc>
		<lastmod>2026-03-04T15:58:11+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/wp-handleiding-sitemap.xml</loc>
		<lastmod>2025-05-13T12:28:48+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/product-sitemap.xml</loc>
		<lastmod>2025-11-13T15:19:07+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/category-sitemap.xml</loc>
		<lastmod>2025-05-13T10:55:24+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/handleiding-categorie-sitemap.xml</loc>
		<lastmod>2025-05-13T12:28:48+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/product_brand-sitemap.xml</loc>
		<lastmod>2025-11-13T15:19:07+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/product_cat-sitemap.xml</loc>
		<lastmod>2025-11-13T15:19:07+00:00</lastmod>
	</sitemap>
	<sitemap>
		<loc>https://stephanie.dev.madeit.be/author-sitemap.xml</loc>
		<lastmod>2025-05-21T10:30:03+00:00</lastmod>
	</sitemap>
</sitemapindex>
<!-- XML Sitemap generated by Yoast SEO -->