{"id":39620,"date":"2023-05-08T06:15:07","date_gmt":"2023-05-08T06:15:07","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=39620"},"modified":"2023-07-19T00:42:07","modified_gmt":"2023-07-19T00:42:07","slug":"how-to-create-responsive-filters-with-jet-offcanvas-column-addon","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/","title":{"rendered":"How to Create Responsive Filters with Jet Offcanvas Column Addon"},"content":{"rendered":"
<\/svg><\/div>
Things to know<\/div>

With the help of the Jet Offcanvas Column<\/strong> add-on, you can hide not only filters but any other content located in a container or column. <\/p><\/div><\/div>\n\n\n\n

Edit Column<\/h2>\n\n\n\n
\n

Head to the page or template where you want the filters to be hidden on mobile and displayed once the button is clicked.<\/p>\n\n\n\n

Once opened, press on the column or container icon you want to edit.<\/p>\n\n\n\n\"edit\n\n\n\n

Move to the Advanced <\/strong>tab and unfold the Offcanvas Settings <\/strong>section. Then, activate the Enable <\/strong>option to uncover the following customization settings.<\/p>\n\n\n\n\"enable\n\n\n\n

Initially, we change the default Expand Label <\/strong>and Collapse Label <\/strong>to desired options.<\/p>\n\n\n\n

Then, move to the Expand Background Color <\/strong>and Expand Text Color <\/strong>fields to alter colors if needed.<\/p>\n\n\n\n\"labels\n\n\n\n

Also, the default Typography <\/strong>can be adjusted by pressing the pencil-shaped icon.<\/p>\n\n\n\n\"expand\n\n\n\n

The following settings allow setting the desired \u201cExpand<\/strong>\u201d button position by adjusting the Expand Padding<\/strong> and Expand Margin<\/strong>.<\/p>\n\n\n\n

As well you can change the Border Type <\/strong>and Expand Border Radius<\/strong>.<\/p>\n\n\n\n

Now we make alterations to the following Expand Button Icon <\/strong>by selecting the \u201cfilter\u201d icon from the WordPress icon gallery.<\/p>\n\n\n\n

Additionally, change the Icon Size<\/strong> if needed.<\/p>\n\n\n\n\"expand\n\n\n\n

The same settings are available for the \u201cCollapse<\/strong>\u201d button. <\/p>\n\n\n\n

We leave the default Collapse Background Color <\/strong>and change the Collapse Text Color<\/strong>.<\/p>\n\n\n\n

The Typography <\/strong>can also be customized for the \u201cCollapse<\/strong>\u201d button.<\/p>\n\n\n\n\"collapse\n\n\n\n

Feel free to alter the Collapse Padding<\/strong>, Collapse Margin<\/strong>, Border Type<\/strong>, and Collapse Border Radius <\/strong>values if needed.<\/p>\n\n\n\n

Here, we also change the Collapse Button Icon <\/strong>to the arrow-shaped button from the WordPress icon library.<\/p>\n\n\n\n

Click the \u201cPublish\/Update<\/strong>\u201d button to save the settings.<\/p>\n\n\n\n\"collapse\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Open the page you have just edited in Elementor. Filters will be displayed in the usual way.<\/p>\n\n\n\n\"filters\n\n\n\n

However, let\u2019s check the page via phone or by opening the responsive mode via Developer Tools on the desktop.<\/p>\n\n\n\n

The \u201cExpand<\/strong>\u201d button (here, \u201cFilters<\/strong>\u201d) is now displayed; click on it.<\/p>\n\n\n\n\"filters\n\n\n\n

The container is open. By pressing the \u201cCollapse<\/strong>\u201d button (here, \u201cBack<\/strong>\u201d), the filter pop-up will be closed.<\/p>\n\n\n\n\"collapse\n<\/div><\/div>\n\n\n\n

Create Collapse Button<\/h2>\n\n\n\n
\n

Additionally, you can make any element a \u201cCollapse<\/strong>\u201d button. For instance, we will make the \u201cApply<\/strong>\u201d button close the filters pop-up.<\/p>\n\n\n\n

Find or add the needed widget in the column or container you will hide.<\/p>\n\n\n\n\"apply\n\n\n\n

Head to the Advanced <\/strong>tab and add the \u2018offcanvas-collapse\u2019 value into the CSS Classes <\/strong>field.<\/p>\n\n\n\n

This class will work once the user clicks directly on the element with this class or a button inside the element with this class.<\/p>\n\n\n\n

Press the \u201cPublish\/Update<\/strong>\u201d button to save the result.<\/p>\n\n\n\n\"apply\n\n\n\n

Return to the front end page to check the result. Click the \u201cExpand<\/strong>\u201d button to open the container with filters.<\/p>\n\n\n\n

Complete the filters and hit the \u201cApply<\/strong>\u201d button; this way, the window also will be closed.<\/p>\n\n\n\n\"apply\n<\/div><\/div>\n\n\n\n

That\u2019s it; now you know how to hide filters in a button with the Jet Offcanvas Column add-on.<\/p>\n","protected":false},"excerpt":{"rendered":"

Edit Column Head to the page or template where you want the filters to be hidden on mobile and displayed once the button is clicked. Once opened, press on the column or container icon you want to edit. Move to the Advanced tab and unfold the Offcanvas Settings section. Then, activate the Enable option to […]<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[421],"yoast_head":"\nHow to Create Responsive Filters with Jet Offcanvas Column Addon \u2013 JetSmartFilters | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover the Jet Offcanvas Column addon from JetSmartfilters to hide and open WordPress filters with a button click on mobile.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Responsive Filters with Jet Offcanvas Column Addon \u2013 JetSmartFilters | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover the Jet Offcanvas Column addon from JetSmartfilters to hide and open WordPress filters with a button click on mobile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-19T00:42:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/05\/edit-column-button-full.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/\",\"name\":\"How to Create Responsive Filters with Jet Offcanvas Column Addon \u2013 JetSmartFilters | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-05-08T06:15:07+00:00\",\"dateModified\":\"2023-07-19T00:42:07+00:00\",\"description\":\"Discover the Jet Offcanvas Column addon from JetSmartfilters to hide and open WordPress filters with a button click on mobile.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Responsive Filters with Jet Offcanvas Column Addon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Responsive Filters with Jet Offcanvas Column Addon \u2013 JetSmartFilters | Crocoblock","description":"Discover the Jet Offcanvas Column addon from JetSmartfilters to hide and open WordPress filters with a button click on mobile.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Responsive Filters with Jet Offcanvas Column Addon \u2013 JetSmartFilters | Crocoblock","og_description":"Discover the Jet Offcanvas Column addon from JetSmartfilters to hide and open WordPress filters with a button click on mobile.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/","og_site_name":"Help Center","article_modified_time":"2023-07-19T00:42:07+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/05\/edit-column-button-full.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/","name":"How to Create Responsive Filters with Jet Offcanvas Column Addon \u2013 JetSmartFilters | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-05-08T06:15:07+00:00","dateModified":"2023-07-19T00:42:07+00:00","description":"Discover the Jet Offcanvas Column addon from JetSmartfilters to hide and open WordPress filters with a button click on mobile.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-responsive-filters-with-jet-offcanvas-column-addon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create Responsive Filters with Jet Offcanvas Column Addon"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/39620"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=39620"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=39620"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=39620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}