Transparence

jQuery(document).ready(function($) { // --- Referencias a los elementos (se mantienen igual) --- const $btnToggle = $('.btn-toggle-filters'); const $buttonText = $btnToggle.find('.elementor-button-text'); const $filters = $('.form-wrapper'); const $gridElement = $('.elementor-element-d71ef62'); const $loopContainer = $('.elementor-loop-container'); // --- ¡NUEVO! CÓDIGO PARA EL ESTADO INICIAL EN MÓVIL --- const isMobileOnLoad = window.matchMedia("(max-width: 1024px)").matches; if (isMobileOnLoad) { // 1. Añadimos la clase 'closed' y ocultamos con display:none para que empiece cerrado $filters.addClass('closed').css('display', 'none'); // 2. Ponemos el texto correcto en el botón $buttonText.text('Mostrar filtros'); } // --- FIN DEL CÓDIGO NUEVO --- $btnToggle.on('click', function(e) { e.preventDefault(); const isMobileOnClick = window.matchMedia("(max-width: 1024px)").matches; if (isMobileOnClick) { // Tu lógica de clic para móvil (ya funciona bien) $filters.addClass('mobile-animation'); if ($filters.hasClass('closed')) { // Mostrar $filters.removeClass('closed').css({ display: 'block', opacity: 0 }); setTimeout(() => { $filters.addClass('opening'); $buttonText.text('Ocultar filtros'); }, 10); setTimeout(() => { $filters.removeClass('opening').css({ opacity: '', display: '' }); }, 310); } else { // Ocultar $filters.addClass('closing'); setTimeout(() => { $filters.removeClass('closing').addClass('closed').css({ display: 'none' }); $buttonText.text('Mostrar filtros'); }, 300); } } else { // Tu lógica de clic para escritorio (ya funciona bien) $filters.toggleClass('closed'); $buttonText.text($filters.hasClass('closed') ? 'Mostrar filtros' : 'Ocultar filtros'); } // El código para cambiar las columnas se queda igual if ($gridElement.hasClass('elementor-grid-3')) { $gridElement.removeClass('elementor-grid-3').addClass('elementor-grid-4'); $loopContainer.removeClass('elementor-grid-3').addClass('elementor-grid-4'); } else { $gridElement.removeClass('elementor-grid-4').addClass('elementor-grid-3'); $loopContainer.removeClass('elementor-grid-4').addClass('elementor-grid-3'); } }); });