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:
- Elementor (Free version) or Block editor (Gutenberg)
- JetEngine plugin installed and activated
with the created Listing item. If you have not done this yet, please follow this tutorial.
- JetSmartFilters plugin installed and activated
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.
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” into 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:
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.
After typing 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.