Help Center
Making JetSmartFilters Expandable and Vice Versa

Making JetSmartFilters Expandable and Vice Versa

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.

Before you start, check the tutorial requirements:

Using 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 smart filters into this widget. 

Learn more about the Accordion widget in the How to display content in the form of a compact accordion tutorial. Please stick to the steps you find there.

Use the HTML Code


Before proceeding with the tutorial′s steps, create a backup or replicate the actions on the staging site. The backup ensures the website restoration if an error occurs. To learn more, proceed to the How to Backup and Restore a WordPress Website with a Plugin article.

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

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

Things to know

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 is no way they can be collapsed.

show filter label

To get more details, follow this How To Make A JetSmartFilters Toggle Easily guide.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.