Stand with Ukraine. Fight for freedom and democracy

Donate
Troubleshooting //
Hiding Listing Grid Before Filtering

Hiding Listing Grid Before Filtering

Question

How can I hide the Listing Grid before dynamic filtering?

Tutorial requirements:

Answer

This trick will be useful for website search.

Create a Filter

For this trick, you can use any filter type available with the JetSmartFilters plugin. I decided to create the Search Filter.

I proceeded to WordPress Dashboard > Smart Filters > Add New, where I typed the filter name, Filter Label, and Active Filter Label. Then, I selected the “Search” Filter Type, changed the Placeholder to “Search Ads…” and left the “Default WordPress search” in the Search by field.

Finally, I hit the “Publish” button.

search filter creation

Add the Listing Grid and Filter to the page

Proceed to the page where you want to place the Listing Grid and filter, and click to edit it in the Elementor or WordPress block editor.

Drag-n-drop the filter widget or block (Search in my case), Select filter, set the “Listing Grid” This filter for, and choose the needed Apply type (I picked “AJAX on typing”).

search filter block

Place the Listing Grid widget or block and pick the needed Listing in the General settings tab.

listing grid block

Move to the Advanced tab and enter “hide-listing” to the Additional CSS class(es) field.

listing grid additional CSS class

Add CSS and JavaScript code

The easiest way is to add the HTML widget or block to the page and enter such a code:

<style>
.hide-listing {
    visibility: hidden;
    height: 0;
}
</style>

<script>
jQuery(document).ready(function( $ ){
    $( document ).on( 'jet-filter-content-rendered', function() { 
        $( '.hide-listing').removeClass('hide-listing');    
  });
});
</script>
custom HTML block

Then, hit the “Publish/Update” button.

If you’re a developer, you can add this code to the functions.php. In this case, make sure to make a backup before editing. For more information, navigate to the Backup Your WordPress Site ASAP article.

Check the results on the front end

Go to the page on the front end. As you can see, there is only the search filter.

hidden listing grid on the front end

After I typed a word, the Listing Grid appeared with the search results.

listing grid is visible after dynamic filtering

That’s all. Now you know how to hide the listing grid before dynamic filtering with JetEngine and JetSmartFilters WordPress plugins.

Was this article helpful?
YesNo
Still need help?
Submit a request