Help Center
Hiding Listing Before Filtering

Hiding Listing Before Filtering

Learn how to hide the Listing Grid before dynamic search filtering on the same page by adding style and script code to make the listing invisible unless the search is applied.

Before you start, check the tutorial requirements:

Create a Search Filter

In the described case, you can use any filter type available with the JetSmartFilters plugin. In this tutorial, we create the Search Filter.

Proceed to WordPress Dashboard > Smart Filters > Add New

Complete the Filter Name, select the “Search” Filter Type, and define the Search by option. Here, we select the “Default WordPress search” option.

Optionally, you can change the Placeholder (in our case, it’s “Search Ads…”) and complete the Filter Label and Active Filter Label.

Once done, hit the “Update” button.

search filter settings

Add the Listing Grid and Filter to the Page

Proceed to the page editor where you want to place the Listing Grid. You can edit it in the WordPress block editor (Gutenberg), Elementor, or Bricks.

Drag and drop the filter block/widget/element (Search/Search Filter in the given case) and complete its settings.

Choose the just-built filter in the SELECT FILTER field, set the “Listing Grid” option in This filter for field, and choose the desired APPLY TYPE (the  “AJAX on typing” in our tutorial).

search block in gutenberg

Place the Listing Grid widget/block/element and pick the needed LISTING in the General settings tab.

listing grid general settings in gutenberg

Move to the Advanced tab and enter “hide-before-filter” into the ADDITIONAL CSS CLASS(ES) field.

Things to know

If you work with Elementor, paste the “hide-before-filter” class in the CSS Classes field in the Advanced settings tab. For Bricks, the Custom CSS field can be found in the CSS section of the Style tab.

With this class, the content will be hidden, but not right away, so to make the filtered widget hidden immediately after the page is loaded, you can add the “hide-listing” class to the field. Separate two classes with a space.

listing grid advanced settings in gutenberg
Things to know

If you want the block/widget/element to hide again after resetting the filters, add the “hide-on-reset” class, separating it by space from the added classes.

hide on reset code

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 Custom HTML block (HTML widget in Elementor or Code element in Bricks) to the page and enter such a code:

Then, hit the “Publish/Update” button to make changes live.

custom html block in gutenberg

Check the Results

Go to the page on the front end. As you can see, there is only the Search filter, and the Listing Grid is not visible.

search filter on the front end

After typing a word, the Listing Grid appears with the search results.

filtered listing

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.