Jetsmartfilters checkboxes list to switcher button

gistfile1.txt

Add this snippet code to your snippet plugins. Create a HTML snippet, and paste in the code and save it.

Elevate your JetSmartFilters experience by converting traditional checkboxes list filters into modern, 
intuitive switcher buttons. This comprehensive guide walks you through the process of integrating sleek toggle switches, 
significantly improving the user interface and interaction on your WordPress site. Discover practical CSS and JavaScript 
techniques to transform your filters, making your website not only more aesthetically pleasing but also enhancing usability. 
Ideal for web developers and WordPress enthusiasts looking to modernize their site's filtering system with a stylish, 
user-friendly approach.
__________________________________________________________________________________



<style>
/* Hide the original checkbox and its decorator */
.jet-checkboxes-list__input, .jet-checkboxes-list__decorator {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Style for the custom switch container */
.switch-container {
    display: inline-block;
    position: relative;
    width: 34px; /* Adjusted width for a smaller switch */
    height: 20px; /* Adjusted height for a smaller switch */
    cursor: pointer;
}

/* The slider */
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px; /* Rounded corners for the slider */
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* Rounded corners for the slider knob */
}

/* Adjust the background and knob position when the checkbox is checked */
.jet-checkboxes-list__input:checked + .switch-container .slider {
    background-color: #2196F3;
}

.jet-checkboxes-list__input:checked + .switch-container .slider:before {
    transform: translateX(14px);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    /* Adjust for phones */
    .switch-container {
        width: 30px; /* Slightly smaller width */
        height: 18px; /* Slightly smaller height */
    }
    .slider:before {
        height: 16px;
        width: 16px;
    }
}

@media (max-width: 1024px) {
    /* Adjust for tablets */
    .switch-container {
        width: 32px; /* Intermediate width */
        height: 19px; /* Intermediate height */
    }
    .slider:before {
        height: 17px;
        width: 17px;
    }
}
</style>


<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.jet-checkboxes-list__input[type="checkbox"]').forEach(function(checkbox) {
        // Skip if the custom switch is already set up
        if (checkbox.nextElementSibling && checkbox.nextElementSibling.classList.contains('switch-container')) {
            return;
        }

        // Create the switch container and slider
        var switchContainer = document.createElement('div');
        switchContainer.className = 'switch-container';
        var slider = document.createElement('div');
        slider.className = 'slider round';

        // Append the slider to the container and then insert the container into the DOM
        switchContainer.appendChild(slider);
        checkbox.parentNode.insertBefore(switchContainer, checkbox.nextSibling);

        // Event listener to toggle the checkbox when the switch is clicked
        switchContainer.addEventListener('click', function(event) {
            // Prevent triggering the click event on the checkbox itself
            event.preventDefault();
            
            // Toggle the checkbox and manually trigger a change event
            checkbox.checked = !checkbox.checked;
            var changeEvent = new Event('change', { bubbles: true });
            checkbox.dispatchEvent(changeEvent);
        });

        // Prevent clicks on the checkbox from stopping propagation
        checkbox.addEventListener('click', function(event) {
            event.stopPropagation();
        });
    });
});
</script>