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').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!

Comments

41 Responses

  1. 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!

    1. 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.

  2. 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?

  3. 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 ?

    1. 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.

  4. 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?

    1. 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 */
      }

  5. 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?

      1. 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

      2. 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?

  6. 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?

  7. 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?

  8. 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?

    1. 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!

    1. 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;
      }

  9. 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.

  10. 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.

    1. 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!

  11. 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!

    1. .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.

  12. 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

    1. 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 ?

  13. 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();
    });
    });
    });

  14. 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..

    1. Try removing these two lines :

      $('.jet-checkboxes-list').slice(0).slideUp();
      $('.jet-filter-label').slice(0,1).addClass('noicon');

  15. 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.

  16. 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();
    });
    });
    });

Leave a Reply