gistfile1.js

$(document).ready( function(){

    $("#search-filter-plugin-styles-css").remove();

    // homepage search and filter
    let $listItems = $(".search-filter li[data-sf-field-input-type='checkbox']");
    $listItems.find("h4").wrap('<div class="sf-tab"></div>');
    $listItems.find("ul").wrap('<div class="sf-tab-content"></div>');
    $("li[data-sf-field-input-type='multiselect'] label").wrap('<div class="sf-tab-content"></div>');

    // create container for the tab content ot live
    $(".search-filter .searchandfilter > ul").after('<div class="sf-tab-content-container">');


    $listItems.each( function() {
        // get parentClass
        let parentClass = $(this).attr('class');
        // add parentClass to tab and tab content
        $(this).find(".sf-tab").addClass(parentClass);
        let $thisTabContent = $(this).find(".sf-tab-content");
        $thisTabContent.addClass(parentClass);

        // move tab content to sf-tab-content-container
        $thisTabContent.detach();
        $(".sf-tab-content-container").append($thisTabContent);
    });

    let $tab = $(".search-filter .sf-tab");
    let $tabContent = $(".search-filter .sf-tab-content");

    // make all checkboxes checked
    //$(".sf-tab-content-container").find(".sf-input-checkbox").prop('checked', true);

    $listItems.on("click touch", function() {
        // grab class of clicked listItem
        let $tabClass = $(this).attr("class");
        // remove selected class from everything that was not clicked
        $listItems.not(this).removeClass("selected");
        // add selected to the one that is clicked
        $(this).toggleClass("selected");
        // removed selected from all tab content
        $(".sf-tab-content-container").find(".sf-tab-content").removeClass("selected");
        // toggle selected for the tab content that matches the class of the one that was clicked
        $(".sf-tab-content-container").find(".sf-tab-content." + $tabClass).toggleClass("selected");
    });

    let $selectDeselectClose = '<ul class="form-selection"><li class="select-all"><a href="">Select All</a></li><li class="clear-all"><a href="">Clear All</a></li><li class="close"><a href="">&times</a></li></ul>'

    $tabContent.prepend($selectDeselectClose);

    let $selectAll = $(".search-filter .select-all a");
    let $clearAll = $(".search-filter .clear-all a");
    let $close = $(".search-filter .close a");

    $selectAll.on("click touch", function(e) {
        e.preventDefault();
        $(this).parentsUntil(".sf-tab-content-container").find(".sf-input-checkbox").prop('checked', true);
    });


    $clearAll.on("click touch", function(e) {
        e.preventDefault();
        $(this).parentsUntil(".sf-tab-content-container").find(".sf-input-checkbox").prop('checked', false);
    });

    $close.on("click touch", function(e) {
        e.preventDefault();
        $tab.parent().removeClass("selected");
        $(this).parents(".sf-tab-content").removeClass("selected");
    });
});