Jetsmartfilters radio input 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 radio 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 radio button and decorator */
.jet-radio-list__input, .jet-radio-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; /* Default width for a smaller switch */
    height: 20px; /* Default height for a smaller switch */
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    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; /* Default size for the knob */
    width: 18px; /* Default size for the knob */
    left: 1px;
    bottom: 1px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* Rounded corners for the slider knob */
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(14px); /* Adjusted for the reduced switch size */
}

/* Rounded sliders */
.slider.round {
    border-radius: 20px; /* Adjusted for an even smaller switch */
}

.slider.round:before {
    border-radius: 50%;
}

/* 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 () {
    var radios = document.querySelectorAll('.jet-radio-list__input');
    Array.prototype.forEach.call(radios, function(radio) {
        // Create a label element to act as the slider
        var label = document.createElement('label');
        label.className = 'slider round';
        radio.parentNode.insertBefore(label, radio.nextSibling);

        // Add a div to act as the switch container
        var switchContainer = document.createElement('div');
        switchContainer.className = 'switch-container';
        radio.parentNode.insertBefore(switchContainer, radio);
        switchContainer.appendChild(radio);
        switchContainer.appendChild(label);

        // Event listener to check/uncheck the radio
        label.addEventListener('click', function() {
            radio.checked = !radio.checked;
            radio.dispatchEvent(new Event('change'));
        });
    });
});
</script>