How To Make A JetSmartFilters Toggle Easily

Table of Contents

In this article, we will learn how to make the JetSmartFilters a toggle easily. Watch this video example of what the functionality will become.

First though, what is JetSmartFilters?

Picture this: you are making an eCommerce website and you would like to allow your customers to filter products quickly and easily?

Well, that's exactly what the JetSmartFilters addon provides!

JetSmartFilters is a user friendly, highly versatile filter widget that works perfectly with JetEngine, JetWooBuilder and Elementor plugins. Whether your site is for advertising products or for sharing helpful posts, you will find Jetsmart filter very useful in allowing your visitors to sort and arrange your content with these filter features:

  • Search Filter with speedy result delivery.
  • Rating Filter that allows your clients/users to discover products and posts based on ratings.
  • Sort Filter for easy sorting of search results based on Name, Price, Date and other factors.
  • Checkboxes Filter to decide what categories and other custom field values should be displayed.

JetSmartFilters will not only leave your site more organised, it will also make it easier for your users to find their way around!

You can get the JetSmartFilters addon for as low as $19 on a yearly subscription for one website.

Step 1: Insert an HTML Element

To add the toggle filtering, you need to put an HTML element block to the page where you want to keep that. Let's grab an HTML block element on your product archive or post archive page. After grabbing the HTML element, an editor screen will be opened.

How To Make A JetSmartFilters Toggle Easily 1

Step 2: Copy The Below Code and Paste it To The HTML Block

<style>
.jet-filter-label:after {
content: "˅"; /* modify this to change the down arrow icon */
float: right;
margin-right: 10px;
}
.jet-filter-label.noicon:after{
content: "";
}
.jet-filter-label {
cursor: pointer;
}
.jet-filter-label.noicon {
cursor: default;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-checkboxes-list-wrapper').slice(0).slideUp();
$('.jet-filter-label').slice(0,1).addClass('noicon');
$('.jet-filter-label').click(function(){
$(this).next().slideToggle();
});
});
});
</script>

To enable the toggle filtering option, copy the above code to the HTML block editor.

How To Make A JetSmartFilters Toggle Easily 2

Finally, enjoy your new JetSmartFilters toggles!

You can adjust the CSS to place your own icon there!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments