Linking flip cards to each other

Support
#1

Hi

I’m using the flip card elements on the page below
http://77.104.134.106/~transf54/jacksonhogg.com/clients/

They are in a grid of 6, representing 6 stages in a process, all is working fine however what i would like to do is have the button on the back of each card flip the next card in the process, e.g. button on back of step 1 to flip the card on step 2 and so on. If the card could also close when the button is clicked that would be great.

With the new elements being released soon is this sort of customisation possible?

Thanks

#2

Hi there,

Please consider that this is a customization and such a feature is not available in our theme. Customization requests are outside of our support scope and we will not be able to implement or maintain the code in future releases.

We will do our best to give you correct suggestion on how to achieve the result.

Please kindly add the code below to X > Launch > Options > JS:

jQuery('.x-face-button').on('click', function(e) {
	e.preventDefault();
	var theItem = jQuery(this).closest('.x-card-outer');
	theItem.closest('.x-column').find('.x-card-outer').removeClass('flipped');
	theItem.next().trigger('click');
});

The Javascript code above registers an event handler for each back button of a flip card:

jQuery('.x-face-button').on('click'

Then prevents the link of the button to go to the top of the screen as normal # href value would do:

e.preventDefault();

After that it finds the parent card of the button and stores it in a variable:

var theItem = jQuery(this).closest('.x-card-outer');

Then it finds the closest column which all the cards are there and searches for each card and makes sure that if they are already flipped, they go to the original position by removing the flipped HTML class:

theItem.closest('.x-column').find('.x-card-outer').removeClass('flipped');

And finally the code goes to the next flip card item and simulates the click event to flip the next card:

the item.next().trigger('click');

Hope it helps.

#3

Hi Christopher

That is absolutely spot on, just what I was after.
The only thing I have noticed, is it possible to focus in or scroll to the flipped element. When going from one row to another or on a mobile it’s not obviously that the card in the next column has flipped.

For example going from card 1 on a mobile to card 2, when you click card 1, it would move you down to the flipped card 2.
And on desktop if you had 1-3 on one row and 4-6 on another when clicking 3 it it could scroll down to 4 so it’s clear what has happened.
Hope that makes sense.

Thanks so much for the excellent support as always.

#4

Further customizations from here would be outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thank you for your understanding.