Accordions for Filters (SOLVED)

Anonymous

#236178

It looks like comments were closed for this post: https://support.searchandfilter.com/forums/topic/ajax-checkboxes-turn-into-an-accordion/

But I wanted to post the full code base for those looking to build an accordion with their filters (especially if you have a long list of multiple checkboxes)

Hope this helps:

<script>
    function accordionDirectory() {

        //specify your class/element targeting based on where your filters exist
        jQuery(".filter h4").wrap("<a class='accordion-title' href='#''></a>");
        jQuery(".filter ul li ul").addClass("accordion-list");

        var allPanels = jQuery('.accordion-list').hide();

        //again make sure your class/element targeting is based on where your filters exist, should match above
        jQuery('.filter a').click(function () {
            event.preventDefault();
            allPanels.slideUp();
            jQuery(this).next().slideDown();
            return false;
        });

    }

    //run the function above upon first load
    accordionDirectory();

    //the var and click function below establishes the active accordion item so it opens upon refresh
    var last_open_tab = "";

    jQuery(document).on("click", ".accordion-list", function () {
        last_open_tab = jQuery(this).parent().attr("class");
    });

    //run function upon the ajax refresh
    (function (jQuery) {
        "use strict";
        jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function () {
            accordionDirectory();
            if (last_open_tab != "") {
                jQuery("." + last_open_tab + " " + "a").next().show();
            }
        });
    }(jQuery));
</script>

Trevor

#236181

That is very kind of you. Thank you!

[Author]

Posts