Filter multiple Loop Grids at the same time

Hi @farhanhan173,

At the moment, each filter widget is designed to target a single loop grid or post widget. Filtering multiple Loop Grids at the same time is not officially supported, mainly to avoid issues with pagination, and reset behavior.

A possible workaround would be to use two identical filter widgets (one per Loop Grid), hide one of them, and mirror the selections with a script so both grids stay in sync.

Proper multi-grid filtering is something I may explore in the future, but I want to make sure it is done reliably before supporting it.

Hope that helps.

Regards,
Dara

Hi @farhanhan173,

Here is a simple workaround that can work well if your setup stays reasonably straightforward. I put together a small demo based on your use case.

Before using it, please keep these points in mind:

• The secondary filter must have a submit button. Auto-triggering the second filter can work, but explicit submit makes the behavior more predictable.
• I recommend keeping the filters simple (checkboxes, radios, basic dropdowns, fixed numeric ranges).
• Advanced fields like Select2 were not fully tested and may require extra coding to keep them in sync.
• The script assumes that the main filter has the ID formA, and the second filter has the ID formB. These are IDs given to the filter only and should not be confused with the target widget IDs used by the filters.
• Some events used in the script (such as “input” and “change”) may need adjustments depending on your filters. These events control how the script listens to user interactions on the form. More details can be found here: https://api.jquery.com/category/events/

<script>
(function($) {
	// Debounce utility to add delays to inputs to avoid overwhelming the script.
    function debounce(fn, wait) {
        let timer;
        return function(...args) {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), wait);
        };
    }

    const $formA = $('#formA');
    const $formB  = $('#formB');

    // 1. Checkboxes & radios.
    $formA.on('change', 'input[type="checkbox"], input[type="radio"]', function() {
        const name    = this.name;
        const value   = this.value;
        const checked = this.checked;

        if (!name || !value) return;

        const $target = $formB.find(<code>input[name=&quot;${name}&quot;][value=&quot;${value}&quot;]</code>);
        if ($target.length) {
            $target.prop('checked', checked);
        }
    });

    // 2. Text / number inputs.
    $formA.on('input', 'input:not([type="checkbox"]):not([type="radio"]), textarea', function() {
        const name = this.name;
        if (!name) return;

        const $targets = $formB.find(<code>[name=&quot;${name}&quot;]</code>);
        if ($targets.length) {
            $targets.val($(this).val());
        }
    });

    // 3. Select.
    $formA.on('change', 'select', function() {
        const name = this.name;
        if (!name) return;

        const value = $(this).val();
        const $formBSelect = $formB.find(<code>select[name=&quot;${name}&quot;]</code>);

        if ($formBSelect.length) {
            $formBSelect.val(value).trigger('change');
        }
    });

    // Debounced submit for formB.
    const debouncedSubmit = debounce(function() {
        const $btn = $formB.find('.submit-form');
        if ($btn.length) {
            $btn.trigger('click');
        }
    }, 600); // Debounce value can be adjusted (ms).

    $formA.on('input change', 'input, select, textarea', debouncedSubmit); // You may need to adjust these events depending on the fields used in your filters, especially for numeric ranges

    // 4. RESET sync.
    $formA.on('click', '.reset-form', function() {
        const slaveForm = $formB.find('form')[0];
        if (!slaveForm) return;

        slaveForm.reset();

        // Submit slave after reset
        setTimeout(function() {
            const $btn = $formB.find('.submit-form');
            if ($btn.length) {
                $btn.trigger('click');
            }
        }, 100);  // Debounce value can be adjusted (ms).
    });

})(jQuery);
</script>

Hopefully this gives you a workable solution for keeping both Loop Grids in sync. Let me know if this works for you.

Regards,
Dara

Hi @farhanhan173,

Regarding the script I see there is a formatting error, from when I copy-pasted it so here is the corrected version:

<script>
(function($) {
    // Debounce utility to add delays to inputs to avoid overwhelming the script.
    function debounce(fn, wait) {
        var timer;
        return function() {
            var args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(this, args);
            }.bind(this), wait);
        };
    }

    var $formA = $('#formA');
    var $formB = $('#formB');

    // 1. Checkboxes & radios.
    $formA.on('change', 'input[type="checkbox"], input[type="radio"]', function() {
        var name    = this.name;
        var value   = this.value;
        var checked = this.checked;

        if (!name || !value) return;

        var $target = $formB.find('input[name="' + name + '"][value="' + value + '"]');
        if ($target.length) {
            $target.prop('checked', checked);
        }
    });

    // 2. Text / number inputs.
    $formA.on('input', 'input:not([type="checkbox"]):not([type="radio"]), textarea', function() {
        var name = this.name;
        if (!name) return;

        var $targets = $formB.find('[name="' + name + '"]');
        if ($targets.length) {
            $targets.val($(this).val());
        }
    });

    // 3. Select.
    $formA.on('change', 'select', function() {
        var name = this.name;
        if (!name) return;

        var value = $(this).val();
        var $formBSelect = $formB.find('select[name="' + name + '"]');

        if ($formBSelect.length) {
            $formBSelect.val(value).trigger('change');
        }
    });

    // Debounced submit for formB.
    var debouncedSubmit = debounce(function() {
        var $btn = $formB.find('.submit-form');
        if ($btn.length) {
            $btn.trigger('click');
        }
    }, 600);

    $formA.on('input change', 'input, select, textarea', debouncedSubmit);

    // 4. RESET sync.
    $formA.on('click', '.reset-form', function() {
        var slaveForm = $formB.find('form')[0];
        if (!slaveForm) return;

        slaveForm.reset();

        setTimeout(function() {
            var $btn = $formB.find('.submit-form');
            if ($btn.length) {
                $btn.trigger('click');
            }
        }, 100);
    });

})(jQuery);
</script>

To have it work, you need two filters on the page:

• The first filter should have the ID formA
• The second filter should have the ID formB
• Make sure these IDs are set on the filter forms themselves, not on the targeted post widgets

The second filter will only trigger if it includes a submit button. Once the IDs and the button are in place, the synchronization between the two filters should work as expected.

Regarding your second scenario, at the moment there isn’t a built-in option to achieve this, it would also require custom javascript to handle.

Let me know if you could make the script work, and I can help clarify anything else.

Regards,
Dara

Hi @farhanhan173,

For this case, I would recommend using CSS instead. It is easier to manage and tweak than javascript. The filter give a special class to the targeted widget when it’s active, so you can use this to your advantage:

.elementor-element:has(.filter-active) .elementor-widget-loop-grid:not(.filter-active) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.elementor-widget-loop-grid {
    transition: opacity 0.3s ease;
}

When interacting with the filter, the non-targeted post grid will fade out.

Let me know if this solution works out for you.

Regards,
Dara

Hi farhanhan173 (@farhanhan173),

Sure, you can adjust the CSS like this so the entire parent container is hidden, not only the loop grid:

<style>
body:has(.elementor-widget-loop-grid.filter-active) 
#YOURID:not(:has(.filter-active)) {
    opacity: 0;
    pointer-events: none;
}

#YOURID {
    transition: opacity 0.3s ease;
}
</style>

Just replace #YOURID with the ID or class of the parent container you want to hide/show. You can also replace opacity: 0; by display: none;, if you want to remove the extra space left by the hidden container.

Hi @farhanhan173,

Great to hear that both solutions worked for you. Since both of you were able to implement the fixes successfully, I’ll go ahead and close this thread.

Feel free to open a new thread if you have any other questions or run into anything else.

Regards,
Dara