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:
- A Search Filter with speedy result delivery.
- A Rating Filter that allows your clients/users to discover products and posts based on ratings.
- A Sort Filter for easy sorting of search results based on Name, Price, Date and other factors.
- A 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.
Step 2: Copy The Below Code and Paste it To The HTML Block
<script> /* Please login to get the code * The code will be for the How To Make A JetSmartFilters Toggle Easily tutorial * Found at this URL https://element.how/crocoblock-jetsmartfilters-toggle/ */ </script>
To enable the toggle filtering option, copy the above code to the HTML block editor.
Finally, enjoy your new JetSmartFilters toggles!
You can adjust the CSS to place your own icon there!
62 Responses
Thanks for sharing! Doesn't seem to work for me. Is there something in the code that I need to update in order to adapt it for my website? When including the HTML block, neither the toggle nor the checkbox filter after it rendered. Any help appreciated!
You already need the JetSmartFilters to be present on your webpage. This only adds the ability to toggle their content, as seen in the video.
It doesn't add the filters themselves.
Thanks so much for sharing this! It works great for me, only issue is that it clips the icon from the first set of search filters. Any idea why that would be happening?
You are welcome!
I would need to see the page to be able to know why that's happening.
IT WORKS LIKE A CHARM !
I am trying to to apply the toggle to a parent category contained in a smart filter but seems like more coding is needed.
Will this be part of a second tutorial ?
I also thought of that. I think it wont work because when you click on the label of a parent categorie it will open th child tree and apply the filter at the same time.
Mauricio IrahetaThanks mate, this also worked for me. How could I make it so its shows a - when oprm and a + when closed ? or arrow up or down?
Yes. Right after this line
$('.jet-filter-label').click(function(){
add
$(this).toggleClass('activeicon');
Then, add this right before the
.jet-filter-label.activeicon:after {
content: "^"; /* modify this to change the active arrow icon */
}
Icon is not displaying for some reason. Can somebody help me with this issue ?
It should be showing... What's your page URL?
For some reason, at the first checkboxes filter the "v" arrow doesn't come up. If i toggle down, it appears suddenly, if i toggle, it disappear.
The code however works well with the other filters under them. How to fix this?
Also if i could set one of the filter toggle would be opened by default - that would be awsome.
Tizenegy Száz
Change
$('.jet-checkboxes-list-wrapper').slice(0).slideUp();
to
$('.jet-checkboxes-list-wrapper').slideUp();
and Delete
$('.jet-filter-label').slice(0,1).addClass('noicon');
Let me know if stuff works better then
Maxime Desrosiers I already figured it out the missing icon: Just put a "V" here:
.jet-filter-label.noicon:after{
content: "";
Any suggestion to do not toggle, the first filter, just the others under it?
Thanks! very usefull script. Works like a charm!
How can I adapt it so the script only executes on tablet and mobile?
I want it expanded on desktop but collapsed on tablet & mobile.
Can you help me with that?
Simply wrap the whole JS part of the code with this!
if (window.innerWidth <= 1024){ /* Code here */ }
WORKES GREAT!! thank u so much.
how can i make it all to be closed by default?
BTW - the first filter never workes, is there a reason?
To fix the first filter, try removing this part:
.slice(0)
Maxime Desrosiers how can i make it all to be closed by default?
Hi maxime, thank you again for this tutorial! Unfortunately the code stopped working from the recent plugin update. is there any possible way for you to inspect the issue why the code doesn't work anymore?
Updated the code!
For others reading this with the same problem, delete your current code and replace with the code in the article. It should then work just fine!
Hey, code works great but i can't find how to add my custom font awesome icon. Could you please help me with that?
Hello! Use this code instead (for the :after pseudo element) , and replace ' f0c9 ' with the code for the icon you want (find them here : https://fontawesome.com/icons?m=free )
.jet-filter-label:after {
content: "\f0c9"; /* Change to the right code for your FA5 icon */
font-family: Font Awesome\ 5 Free;
font-weight: 900;
float: right;
margin-right: 10px;
}
Really great work man! Thanks a lot. May you tell me how can I use the toggle unfolded or collasped? I want after clicking it will expand. Please write about it.
Hi. Great work!
1. Can you make it so that only the filters I choose have the toggle-effect? I have several filters on the page and only want this effect on some.
2. Can you make it so that the toggle is shut when you enter the page?
Thanks.
Hey Pierre!
Yes and yes, however a good understanding of the code is required to be able to single out some filters, and leave alone others. So this is possible, but beyond the scope of the article.
2. Can you make it so that the toggle is shut when you enter the page?
I believe that's already how it is by default!
Maxime Desrosiers Ok, I understand. Thanks anyway. Great script! 🙂
One of the ^ is not showing on my screen as an option to toggle. Has this happened to anyone? TIA.
You made my day. Thanks!
This is fantastic!
One thing though, how can I change the "V" to an icon? And also, the price label for the range filter is not hidden when toggled!
hi
code is working good but when right to left the V sign goes back to text how to make infront the icon ??
.rtl .jet-filter-label:after {
float: left;
}
add this CSS, in the html element, after the other CSS already there... before the closing tag. It should fix it.
how to sort filter items decending ??
Hi, thanks for this.
But this doesn't seem to be working for filters where searchbox is enabled. Need your help with this.
Also, we want all filters to be open by default and user has an option to collapse the filter. How can we facilitate that?
Thanks again
Hello Tanya! To have all filters opened by default, simply delete this line, in the code :
$('.jet-checkboxes-list').slice(0).slideUp();
For filters with search box enabled, I'm not certain why it's not working. Could you share your URL with me ?
Hi thank you very much for the function!
Iv attached the code to make the icons change based on active & not active.
In any case im using following snippet (attached bellow)
and i would love to make the animation / icon toggle for the icons abit smoother.
-And there is some kind of bug with the slider, it kind of bugs a litle bit on collapse / open.
If this could be fixed id be very happy! 🙂
/*Snippet of code im using:*/
.jet-filter-label.activeicon:after {
content: "\f0dd"; /* modify this to change the active arrow icon */
transition: all 1s ease-out;
}
.jet-filter-label:after {
content: "\f0de"; /* Change to the right code for your FA5 icon */
font-family: Font Awesome\ 5 Free;
font-weight: 900;
float: right;
margin-right: 10px;
}
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-checkboxes-list').slice(1).slideUp();
$('.jet-filter-label').slice(0,1).addClass('noicon');
$('.jet-filter-label').click(function(){
$(this).toggleClass('activeicon');
$(this).next().slideToggle();
});
});
});
Hi thank you very much for the function!
But in range slide filter it works reverse means its auto open and show plus icon and then we click on filter then its hide and show minus icon .
can anyone help me..
Try removing these two lines :
$('.jet-checkboxes-list').slice(0).slideUp();
$('.jet-filter-label').slice(0,1).addClass('noicon');
Hi There,
1. How do I make the parent category of filters not to expand along with the label? I want to make it each parent category have it's own expansion
2. How doI remove the Checkbox from the Parent category?
Thank you.
Hey all! I am using the "Radio Filter" and modified the code to help people who have categories with parents and children. This will hide all children by default and only show them when the parent is selected.
Example Result:
All
▼Tech
▼Computers
CPUs
►TVs
Cars
▼Soda
Sugar
Non-Sugar
*Some notes -
I changed the .click function to .mouseUp so it does not conflict with the parent selection.
Icons are swapped to the left of the text by changing :after to :before.
Every class is .jet-list-tree__parent for all functions except for .jet-list-tree__children as this is
the line that hides that class by default.
Works beyond children of children.
Code:
.jet-list-tree__parent.activeicon:before {
content: "▼";
}
.jet-list-tree__parent:before {
content: "►";
}
.jet-list-tree__parent.noicon:before{
content: "";
}
.jet-list-tree__parent {
cursor: pointer;
}
.jet-list-tree__parent.noicon {
cursor: default;
}
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-list-tree__children').slice().slideUp(0);
$('.jet-list-tree__parent').slice(1,0).addClass('noicon');
$('.jet-list-tree__parent').mouseup(function(){
$(this).toggleClass('activeicon');
$(this).next().slideToggle();
});
});
});
Thank you for sharing! Really appreciated!
Post comments coming up 403 forbidden?
Hi Maxime....
Fantastic bit of script but I just can not seem to open any toggle...
My 3 filters all stay closed and the "V" is not visible.
Can you help?
Just staging ... here is the URL of my shop page: http://www.johnw136.sg-host.com/shop/
Thanks in advance for your help!
John 🙂
Hey, is there any option to open the filter only with one toggle? So, when I click on toggle the hole filter should show on mobile, like open mobile menu from left to right.
Best regards,
Luciano
Better use a popup for that!
Hey thanks for the post. I'm using the 'Checkboxes List' filter and I'm just looking for a way to only show the parent categories by default, and either click or toggle to reveal the subcategories. Is this possible? Thanks in advance!
Hey Sam!
Yes this is possible. In this tutorial I just wanted to keep things as simple as possible, and give a solution that would satisfy most users. You can reach out to me for customization work!
Thanks Max! It’s awesome, for some reason it’s not working on mobile browsers for me? Could it be a CSS specificity issue?
Hey Aaron!
I'm not certain... I would need to see the page.
Hey Maxime, thank you are! I'm sorry, my english little bad 🙁 Good tool of codes. But you must have forgotten to add the "v" in that place. That's why the icon does not appear in the first line.
____
.jet-filter-label.noicon:after{
content: "v";
____
And I would like to add; Anyone with a lot of nested hierarchies can use this code. (Checkbox)
____
.jet-list-tree__parent:after {
content: "˅"; /* modify this to change the down arrow icon */
float: right;
margin-right: 10px;
}
.jet-list-tree__parent.noicon:after{
content: "˅";
}
.jet-list-tree__parent {
cursor: pointer;
}
.jet-list-tree__parent.noicons {
cursor: pointer;
}
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-list-tree__children').slice(0).slideUp();
$('.jet-list-tree__parent').slice(0,1).addClass('noicon');
$('.jet-list-tree__parent').click(function(){
$(this).next().slideToggle();
});
});
});
Nope I didn't forget... it has the .noicon class , so this is the pseudo element for when no icons should be shown. That's why it was only "" and not "v".
Hi
Thank you for this solution.
I have used your code and it works perfectly in most cases.
In our page design, we show filters in a popup page for mobile users (Using Jetpopup plugin). Unfortunately, this code does not work when using popup.
I have added this snippet to wp_head hook (instead of inner HTML).
How can we solve this?
Thank you
Hey Amin!
Indeed it won't work as is in a popup. There, you need to remove this line at the start of the javascript portion (in between the <script> tags):
document.addEventListener('DOMContentLoaded', function() {
And also delete one instance of these three characters at the end of the javascript portion
});
Then, it should work in a popup. The HTML element with the code also needs to be in the popup.
Cheers!
Awesome contribution.
You have a lit a sudden love for CSS and I thank you for that flame you have lit- plus the the filter code is pretty awesome too 🙂
Loved reading through everyone's comments
Hello,
When trying to add the code to the website I'm getting 403 error from Elementor.
Is there a specific place within the page that this code should be implemented?
Thanks in advance,
Ran.
Hey Ran!
This might be permissions error (are you admin?) or might be a plugin like WordFence.
For anyone that is having a problem with the first item on filters. To show the arrow there you should change:
$('.jet-filter-label').slice(0,1).addClass('noicon');
to
$('.jet-filter-label').slice(-1,1).addClass('noicon');
Thanks for sharing Marialena!
Hello,
thanks for publishing this guide it helped me so much!
everthing is working prefect except of the visual filter that got the "v" next to him and can be close and open ,
but when i open the filters he is the only one that is not toggeld and with all the option ?
is there a way to close him in it intial state like the rest of the filters?
Hey Dan!
Yes. Change these 2 lines:
$('.jet-checkboxes-list').slice(0).slideUp();
$('.jet-filter-label').slice(0,1).addClass('noicon');
to only
$('.jet-checkboxes-list').slideUp();
(delete the other line)
Cheers!
Maxime Desrosiers, Thanks for that fast replay:)!!!
I replaced that line against the two that you mention but it didnt made any change,
could it be because the "visual filter" was added recently?
if you have any more suggestion i will realy appricicate it!
Hey Dan!
Could I see your page with the filters?