Icon grid flip – close

Hey Julie,
Thank you for the link to your site, first I added the custom class click-to-close to your flipbox

Then I added this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_click_to_close_flipbox_script() { ?>
  <script>
jQuery(document).ready(function($) {
    $('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').hover(
        function() {
            var $flipback = $(this).find('.avia-icongrid-flipback');
            // Check if the transform is rotateY(0deg)
            if ($flipback.css('transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
                $(this).addClass('avia-hover');
                console.log('avia-hover class added');
            }
        }
    );

    // Function to handle clicks outside the element
    $(document).on('click', function(event) {
        if (!$(event.target).closest('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').length) {
            $('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').removeClass('avia-hover');
            console.log('avia-hover class removed');
        }
    });

    // Prevent clicks inside the element from triggering the document click handler
    $('.click-to-close .avia-icongrid-flipbox .av-icon-cell-item').on('click', function(event) {
        event.stopPropagation();
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_click_to_close_flipbox_script', 99 );

Now when you hover over the flipbox and it flips the class avia-hover is added to it so that it won’t flip back, until you click outside of the element, in which the class is removed.
please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks, it doesn’t seem to interfere with the mobile behavior.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike