JetSmartfilter Checkbox filter - Group parent toggle

gistfile1.txt

// make your Checkbox filter, and ensure that "Group terms by parents" option is checkhed. 
// In the Checkbox filter widget enable the Dropdown additions. You can use the search option also. (Mixed filter type not tested)
// Paste this code in a specific js file, plugin, or use the Elementor custom code function. (if elementor custom code, dont forget to
// use the tags, like <script> and <style>
// Multi level not tested, only one level.

// Warning this script will affect all of your checkbox filter, where you settinged up the "Group terms by parents" option.

// PREVIEW : https://prnt.sc/5fPJ6iebdDCy 

<script>
jQuery(document).ready(function($) {
if ($('.jet-smart-filters-checkboxes').length > 0) {
    // Chekch the.jet-list-tree__parent element
    $('.jet-smart-filters-checkboxes .jet-list-tree__parent').each(function() {
        var firstLabel = $(this).find('label').first();
        if (firstLabel.length) {
            // Add FontAwesome ikon
            firstLabel.append(' <i class="fa fa-chevron-up"></i>'); // choose your icon
        }
    });
}

// Event manager for the .jet-list-tree__parent 
$('.jet-smart-filters-checkboxes .jet-list-tree__parent').on('click', function(event) {
    event.preventDefault();

    var childrenContainer = $(this).next('.jet-list-tree__children');
    var icon = $(this).find('label').first().find('i');

    // Toggle effect
    if (childrenContainer.length) {
        childrenContainer.slideToggle('fast', function() {
            // Switch icon based on state
            if (childrenContainer.is(':visible')) {
                icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
            } else {
                icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }
        });
    }
});

// setup and use mutationobserver for the search bar to  handle the search bar case properly
function setupMutationObserver() {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                updateParentClickHandlers();
            }
        });
    });

    var config = { attributes: true, childList: true, subtree: true };

    $('.jet-list-tree__children').each(function() {
        observer.observe(this, config);
    });
}

// Initialise the MutationObserver
setupMutationObserver();

// event handler for the .jet-filter-items-search__input input changes
$('.jet-smart-filters-checkboxes').on('input', '.jet-filter-items-search__input', function() {
    setTimeout(updateParentClickHandlers, 0); // wait for the DOM changes
});

function updateParentClickHandlers() {
    $('.jet-smart-filters-checkboxes .jet-list-tree__parent').each(function() {
        var parent = $(this);
        var childrenContainer = parent.next('.jet-list-tree__children');
        var icon = parent.find('label').first().find('i');

        parent.off('click').on('click', function(event) {
            event.preventDefault();

            
            var hasVisibleChildren = childrenContainer.find('.jet-checkboxes-list__row').filter(function() {
                return $(this).css('display') !== 'none';
            }).length > 0;

            
            if (hasVisibleChildren) {
                childrenContainer.slideToggle('fast', function() {
                    // Ikon cseréje
                    if (childrenContainer.is(':visible')) {
                        icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
                    } else {
                        icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                    }
                });
                icon.show(); // show icon
            } else {
                icon.hide(); // Hide icon
            }
        });

        // Starter icon setup
        if (childrenContainer.find('.jet-checkboxes-list__row').filter(function() {
            return $(this).css('display') !== 'none';
        }).length > 0) {
            icon.show();
        } else {
            icon.hide();
        }
    });
 }
});

</script>

<style>


	.jet-list-tree__parent .jet-checkboxes-list__label {
		font-weight: 500 !important;
	}
	
	.jet-checkboxes-list__item i {
		color: var(--e-global-color-text);
		font-size: 14px;
		font-weight: 400;
	}	

</style>