How To Make JetSmartFilters A Toggle Easily

Table of Contents

 

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

To begin with, insert an HTML element

In the same page, post archive or product archive as your JetSmartFilters. It can be anywhere on the page.

How To Make JetSmartFilters A Toggle Easily 1

Then, copy paste the code below in the HTML element

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

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