Help Center

Knowledge base Tips & tricks Hiding Listing Before Filtering

Hiding Listing Before Filtering

Hide the Listing Grid before dynamic Search filtering on the same page by adding style and script code. This way listing won't be visible unless the search is applied.

Before you start check tutorial
requirements:

Create a Search Filter

For this trick, you can use any filter type available with the JetSmartFilters plugin. In this tutorial, we created 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” into the Additional CSS class(es) field.

listing grid additional css class

Add CSS and JavaScript code

Warning

Before proceeding with the tutorial′s steps, create a backup or replicate the actions on the staging site. The backup ensures the website restoration if an error occurs. To learn more, proceed to the How to Backup and Restore a WordPress Website with a Plugin article.

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

custom html block

Then, hit the “Publish/Update” button.

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 frontend

After typing 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

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.