---
title: "ایجاد تب تغییر وضعیت برای فیلتر های افزونه JetSmartFilters"
url: "https://elementorfa.ir/jetsmartfilters-toggle-elementor/"
type: "post"
published: "2020-10-18T16:52:29+03:30"
modified: "2023-09-29T12:37:09+03:30"
author: "المنتور فارسی"
---

5/5 - (17 امتیاز)

اگر با صفحه ساز المنتور فروشگاه خودتان را طراحی کرده باشید، ممکن است از ویجت های[افزونه Jet Smart Filters](https://elementorfa.ir/item/%d8%a7%d9%81%d8%b2%d9%88%d9%86%d9%87-jet-smart-filters/) برای ایجاد فیلتر محصولات استفاده کرده باشید.

> **بخوانید:**[نحوه فیلتر کردن محصولات ووکامرس بر اساس ویژگی محصول با المنتور](https://elementorfa.ir/jetsmartfilters-filter-woocommerce-products-attributes/)

حالا تصور کنید تعداد فیلتر های شما در سایدبار فروشگاه زیاد باشد، در این صورت تمامی این فیلتر ها پشت سر هم قرار گرفته و یک ظاهر نا منظمی را در سایت شما ایجاد می کنند.

![تب تغییر وضعیت فیلتر المنتور](https://elementorfa.ir/wp-content/uploads/2020/10/toggle-jet-smart-filter-js.png)

در این مقاله، قصد داریم تا با ایجاد تب های بازشونده برای فیلتر ها، تنها زمانی که کاربر روی تب مورد نظر کلیک کرد فیلتر ها نمایش داده شود.

## ایجاد تب های بازشونده برای فیلتر های افزونه JetSmartFilters

### سفارشی سازی ظاهر تب فیلتر

وارد صفحه فروشگاه یا دسته بندی محصولات در المنتور شده تا کمی ظاهر تب ها فیلتر را تغییر دهیم.

در اینجا می خواهیم یک فلش به لیبل تب ها اضافه کنیم تا حالت باز کردن را به کاربر نشان دهیم. وارد بخش CSS سفارشی ستونی که فیلتر ها قرار دارند شده و کد CSS زیر را قرار دهید.

```
.jet-filter-label:after {
content: '\f078';
font-family:fontawesome;
float: left;
}
.jet-filter-label.noicon:after{
content: "";
}
.jet-filter-label {
cursor: pointer;
}
```

![تب تغییر وضعیت فیلتر المنتور](https://elementorfa.ir/wp-content/uploads/2020/10/add-css-to-elementor.png)

بعد از قرار دادن کد، تب فیلتر ها به شکل زیر خواهد شد:

![تب تغییر وضعیت فیلتر المنتور](https://elementorfa.ir/wp-content/uploads/2020/10/arrow-toggle-elementor.png)

در ادامه باید عملیات باز و بسته شدن تب ها را با استفاده از کد JS انجام دهیم.

### عملیات باز و بسته شدن تب فیلتر ها

برای این کار ابتدا [افزونه Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/) را از مخزن وردپرس نصب کنید.

سپس در پیشخوان وردپرس روی تب Custom CSS and JS زده و گزینه سوم یعنی Add Custom JS را انتخاب کنید.

![تب تغییر وضعیت فیلتر المنتور](https://elementorfa.ir/wp-content/uploads/2020/10/Custom-CSS-and-JS.png)

در صفحه باز شده، یک نام برای فایل JS و کد زیر را داخل بخش محتوایی قرار دهید:

```
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.jet-checkboxes-list-wrapper').slice(0).slideUp();
$('.jet-filter-label').click(function(){
$(this).next().slideToggle();
});
});
});
```

![تب تغییر وضعیت فیلتر المنتور](https://elementorfa.ir/wp-content/uploads/2020/10/add-custom-js-elementor.png)

فایل را ذخیره کرده و به صفحه فروشگاه خودتان بروید. تمامی تب ها به صورت پیش فرض بسته خواهد بود و در صورت کلیک بر روی هر تب، باز خواهد شد.

در انتها می توانید نحوه باز و بسته شدن تب های فلیتر افزونه Jet Smart Filters را مشاهده کنید.



### دانلود فایل اجرایی

همچنین می توانید قالب طراحی شده در این آموزش را از طریق لینک زیر دانلود کرده و با استفاده از [آموزش درون ریزی قالب های المنتور](https://elementorfa.ir/%d8%af%d8%b1%d9%88%d9%86-%d8%b1%db%8c%d8%b2%db%8c-%d9%88-%d8%ae%d8%b1%d9%88%d8%ac%db%8c-%da%af%d8%b1%d9%81%d8%aa%d9%86-%d9%82%d8%a7%d9%84%d8%a8-%d8%a7%d9%84%d9%85%d9%86%d8%aa%d9%88%d8%b1/)، درون سایت خود درج کنید.

[دانلود فایل](https://dl.dropboxusercontent.com/s/kvqhy9mqgqlutsy/ArchiveProduct.json?dl=1)

امیدوارم که از این آموزش هم به خوبی استفاده کرده باشید. اگر مشکلی در نحوه اجرای این مگامنو دارید از طریق بخش نظرات مطرح کنید.