How to Make JetSmartFilters Collapsible with Parent Categories in Elementor

Introduction:

JetSmartFilters is a powerful filtering plugin for Elementor that allows users to add advanced filters to their websites. One of the features that JetSmartFilters doesn’t offer out of the box is collapsible parent categories. In this tutorial, we’ll show you how to create collapsible parent categories in JetSmartFilters using custom CSS and JavaScript in Elementor.

Step 1: Add JetSmartFilters to Your Elementor Website The first step is to add JetSmartFilters to your Elementor website. If you haven’t already done so, go to the Elementor Pro dashboard and navigate to the JetSmartFilters widget. You can add JetSmartFilters to your website by dragging and dropping the widget onto your page.

Step 2: Create Your Categories Once JetSmartFilters is added to your page, you’ll need to create your categories. You can do this by navigating to the “Checkboxes list” tab in the JetSmartFilters widget and selecting the “Add New” button. Here, you can create your categories and subcategories.

Step 3: Customize Your CSS To make your parent categories collapsible, you’ll need to customize your CSS. Start by opening the “Advanced” tab in the JetSmartFilters widget and adding the following CSS:

 .jet-checkboxes-list__row.jet-filter-row.jet-list-tree__parent label.jet-checkboxes-list__item .jet-checkboxes-list__decorator {
    display: none!important;
}

.jet-checkboxes-list .jet-filter-row.jet-list-tree__parent{
    cursor: pointer!important;
}

.jet-checkboxes-list .jet-filter-row.jet-list-tree__parent {
    background: #f7f7f7;
    padding: 4px 15px;
    transition: background .5s ease;
}
.jet-checkboxes-list .jet-filter-row.jet-list-tree__parent:hover {
    background: #ca9f37;
    color: #fff;
}
.jet-checkboxes-list .jet-filter-row.jet-list-tree__parent:hover span.jet-checkboxes-list__label{
    color: #fff;
}
.jet-checkboxes-list .jet-list-tree__parent .jet-list-tree__children {
    display: none;
}
.jet-checkboxes-list .jet-list-tree__parent:before {
    content: "+";
    margin-right: 5px;
    cursor: pointer;
    position: absolute;
    right: 25px;
}

.jet-checkboxes-list .jet-list-tree__parent.active:before {
    content: "-";
}

This CSS code adds a cursor pointer to your parent categories and hides your child categories by default. The last line of code.

Step 4: Customize Your JavaScript To customize your JetSmartFilters fully, you’ll also need to customize your JavaScript. Start by opening the “Advanced” tab in the JetSmartFilters widget and adding the following JavaScript:

jQuery(document).ready(function($) {
  // Hide all child categories by default
  $('.jet-list-tree__children').hide();

  // Toggle child categories on parent category click
  $('.jet-list-tree__parent').click(function(e) {
    e.preventDefault();
    $(this).next('.jet-list-tree__children').slideToggle();
    $(this).toggleClass('jet-list-tree__parent--opened');
  });

  // Set parent category icon to minus sign
  $('.jet-list-tree__parent--opened').each(function() {
    $(this).find('.jet-list-tree__toggle-icon').removeClass('fa-plus').addClass('fa-minus');
  });
});

This JavaScript code slideToggle your parent categories when they’re clicked. This class is what triggers your CSS code to make your parent categories collapsible.

Conclusion:

By following these steps, you can easily create collapsible parent categories in JetSmartFilters using custom CSS and JavaScript in Elementor. This will make your filtering options more user-friendly and improve the overall experience of your website.