new flipbox feature

Hey petradrumm,

Thank you for using Enfold.

Yes, that’s possible. Add this script in the functions.php file:

function ava_flipbox_clicked(){
    ?>
    <script>
        (function() {
            const f = document.querySelector('.avia-icongrid-flipbox');
            flipBox = (event) => {
                const li = event.currentTarget;
                if( ! li.classList.contains('clicked') ) {
                    li.classList.add('clicked');
                } else {
                    li.classList.remove('clicked');
                } 
            }

            if(f) {
                const l = f.children;
                for (i = 0; i < l.length; i++) {
                    l[i].addEventListener( 'click', (event) => flipBox(event), false );
                }
            }
        })();
    </script>
    <?php
    }
add_action('wp_footer', 'ava_flipbox_clicked');

And then add this css code to disable the default hover state and add the new “clicked” state:

.avia-icongrid-flipbox li:hover .avia-icongrid-front, .avia-icongrid-flipbox li.av-flip .avia-icongrid-front {
  -webkit-transform: none;
  transform: none;
}

.avia-icongrid-flipbox li.clicked .avia-icongrid-front, .avia-icongrid-flipbox li.av-flip.clicked .avia-icongrid-front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

Best regards,
Ismael