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.
That’s all. More detailed instructions can be found here:
https://element.how/crocoblock-jetsmartfilters-toggle/?fbclid=IwAR2t6o9LtJ9oJDkKGaihhezIXTuAeT4OeBxQRuyetrazWo9vb2CKDgRvuII