Troubleshooting //
Making JetSmartFilters Expandable & Vice Versa

Making JetSmartFilters Expandable & Vice Versa

Question

How can I collapse/expand filters?

Answer

First of all, we should say that collapsing/expanding filters is a case that requires a custom solution. Therefore, it is advised to use Crocoblock products in the first place. In this quick fix article, you’ll find two methods to make JetSmartFilters expandable.

Use the Accordion widget

Classic Accordion is a JetTabs widget that lets you display the website content compactly. In addition to text sections, you can also put the smart filters into this widget. 

Here’s a detailed tutorial: https://crocoblock.com/knowledge-base/articles/jettabs-accordion-widget-how-to-display-content-in-the-form-of-a-compact-accordion/ 

Please stick to the steps you find there.

Use the HTML code

You simply add the HTML element block to the page where you want to expand/collapse smart filters. Then paste the following code into it:

<style>
.jet-filter-label:after {
content: "˅";
float: right;
margin-right: 10px;
}
.jet-filter-label.noicon:after{
content: "";
}
.jet-filter-label {
cursor: pointer;
}
.jet-filter-label.noicon {
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-checkboxes-list').slice(0).slideUp();
$('.jet-filter-label').click(function(){
$(this).next().slideToggle();
if (!$(this).hasClass('noicon')){$(this).addClass('noicon');}
else {
$(this).removeClass('noicon');
}
});
});
});
</script>

Please note that you can modify the line “content: “˅”;” in case you want the arrow icon to point up. 

One more thing: at the stage of styling in Elementor, make sure the Show filter label toggle is enabled. Otherwise, the filters will be expanded just once and there’s no way they can be collapsed.

active show filter label in checkboxes filter settings

That’s all. More detailed instructions can be found here: 
https://element.how/crocoblock-jetsmartfilters-toggle/?fbclid=IwAR2t6o9LtJ9oJDkKGaihhezIXTuAeT4OeBxQRuyetrazWo9vb2CKDgRvuII

Was this article helpful?
YesNo
Still need help?
Submit a request