Hiding Listing Grid Before Filtering

Question

How can I hide the Listing Grid before dynamic filtering?

Tutorial requirements:

• JetEngine plugin;
• JetSmartFilters plugin;
• Elementor or WordPress Block editor;
• A created Listing.

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.

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”).

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

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

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>

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.

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

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