Looking for a solution to flip the content right to left direction using this jQuery script that flips the content when clicked? The code seems to be working fine, but currently, it alternates between flipping right to left and left to right. Is there a way to set the direction so it only flips from right to left consistently?
var topCard = 1;
var facingUp = true;
var totalFaces = $('#flip-content .contents').length;
function flipCard(n) {
// Replace the contents of the current back-face with the contents
// of the element that should rotate into view.
var curBackFace = $('.' + (facingUp ? 'face2' : 'face1'));
var nextContent = $('#flip-content' + n).html();
var nextContent = $('#flip-content .contents:nth-child(' + n + ')').html();
curBackFace.html(nextContent);
// Rotate the content
$('.card').toggleClass('flipped');
facingUp = !facingUp;
if (topCard === totalFaces) {
topCard = 0;
}
}
$('#flip-content').on('click', function () {
topCard++;
flipCard(topCard);
});
$(document).ready(function () {
// Add the appropriate content to the initial "front side"
var frontFace = $('.face1');
var frontContent = $('#flip-content .contents:first-child').html();
frontFace.html(frontContent);
});