/* optional: class-based hide so CSS wins even if Elementor reflows */ .title_col_whatson.is-hidden { display: none !important; } (function () { function onReady(fn){ if (document.readyState !== 'loading') fn(); else document.addEventListener('DOMContentLoaded', fn); } onReady(function () { const loopGrid = document.querySelector('.wh_on_carsl'); const headerWrapper = document.querySelector('.title_col_whatson'); if (!loopGrid || !headerWrapper) return; function itemCount() { // Works for Loop Carousel & Loop Grid return loopGrid.querySelectorAll('.e-loop-item, .elementor-loop-item, [data-elementor-type="loop-item"]').length; } function showHeader() { headerWrapper.classList.remove('is-hidden'); // Remove inline display:none so Elementor’s default (flex) applies headerWrapper.style.removeProperty('display'); } function hideHeader() { headerWrapper.classList.add('is-hidden'); // Keep it hidden even if Elementor toggles styles headerWrapper.style.setProperty('display', 'none', 'important'); } function toggleHeader() { if (itemCount() > 0) showHeader(); else hideHeader(); } // Initial checks toggleHeader(); window.addEventListener('load', toggleHeader); // Observe DOM changes inside the loop widget (Swiper builds slides async) const obs = new MutationObserver(toggleHeader); obs.observe(loopGrid, { childList: true, subtree: true }); // If Elementor/jQuery is present, hook into init/update moments if (window.jQuery && window.elementorFrontend) { jQuery(window).on('elementor/frontend/init', toggleHeader); jQuery(document).on('elements:swiper:initialized elements:swiper:updated', toggleHeader); } }); })();