Hierarchical Checkboxes Facet Accordion with ‘opened’ class for facet-expand icons for custom styling of opened and closed parents

<?php

// Hierarchical Checkboxes Facet Accordion with 'opened' class for facet-expand icons for custom CSS styling of opened and closed parents
// Add to your (child)( theme's functions.php

// Adds an 'opened' class to facet-expand of an opened parent.
// Closes other parents on same level on click of a parent
// Also works when the initial page load is with a child selected, causing the parent to be 'opened'.
// The style part is just for demonstration. Use the selectors to style the facetwp-expand icons.

add_action( 'wp_head', function() { ?>

    <style>
        .facetwp-type-checkboxes .facetwp-expand {
            color: green;
        }
        .facetwp-type-checkboxes .facetwp-expand.opened {
            color: red;
        }
    </style>

    <script>
      (function($) {

        // Accordion part 1: toggle 'opened' class on click of icons and close other parents on the same level
        $(document).on('click', '.facetwp-type-checkboxes .facetwp-expand', function(e) {
          $(this).toggleClass('opened');
          $(this).closest('.facetwp-checkbox').siblings('.facetwp-checkbox').each(function() {
            $(this).next('.facetwp-depth').removeClass('visible');
            $(this).children('.facetwp-expand').removeClass('opened');
          });
          e.stopPropagation();
        });

        // Accordion part 2: if on first pageload a child is already selected, parent needs a 'opened' class
        $(document).on('facetwp-loaded', function() {
          FWP.hooks.addAction('facetwp/loaded', function() {
            $('.facetwp-type-checkboxes .facetwp-depth').each(function() {
              if ($(this).hasClass('visible')) {
                $(this).prev('.facetwp-checkbox').children('.facetwp-expand').addClass('opened');
              }
            });
          });
        });
      })(jQuery);

    </script>
<?php } );