Reset old card flip when flipping a new card

Is it possible to automatically flip the old card back when you flip a second one?

I have this JSFiddle which I found in this question. I looked around the internet but couldn’t find any solutions to this specific problem. It might be similar to this. Hope this could help 🙂

I’d like to add a button to manually flip the card back and forth.

the code

$('.flip-container .flipper').click(function() {
    $(this).closest('.flip-container').toggleClass('hover');
    $(this).css('transform, rotateY(180deg)');
});

/* flip the pane when hovered */

.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 250px;
    height: 250px;
}


/* flip speed */

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}


/* hide back of pane during swap */

.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


/* front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
    background-color: #fff;
}

.artist-1 {
    background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
    background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            <!-- front content -->
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>

<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            <!-- front content -->
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>

Answer

Set .toggleClass() (or .removeClass()) to .hover element.

$('.flip-container .flipper').on('click',function() {
    // flip back previous hovered element
    if ($('.flip-container.hover').length === 1) {
        // is previous flipped the same as current one?
        var same = $(this).parent().hasClass('hover');

        $('.flip-container.hover').toggleClass('hover');

        var el = $(this);
    
        // flip current element if not the previous one
        if (!same) {
            setTimeout(function() {
                el.closest('.flip-container').toggleClass('hover');
            }, 800);
        }
    } else {
        $(this).closest('.flip-container').toggleClass('hover');
    }
});

/* flip the pane when hovered */

.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 250px;
    height: 250px;
}


/* flip speed */

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}


/* hide back of pane during swap */

.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


/* front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
    background-color: #fff;
}

.artist-1 {
    background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
    background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            <!-- front content -->
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>

<div class="flip-container">
    <div class="flipper">
        <div class="front artist-1">
            <!-- front content -->
        </div>
        <div class="back">
            <p>You won</p>
        </div>
    </div>
</div>