css/javascript multiple card flip: reset other cards

Question

So I'm currently using this one: http://jsfiddle.net/nawdpj5j/10/

Now what I need is that when I flip one card (doesn't matter which one) and then flip another one the first one resets/turnes back.

I think I need to add something in here:

var init = function() {
var flippers = document.getElementsByClassName("flip");

for(i = 0; i < flippers.length; i++){
    flippers[i].addEventListener( 'click', function(){
        var cardID = this.dataset.targetid;
        var card = document.getElementById(cardID);
        card.toggleClassName('flipped');
}, false);
}


};

Thank you in advance!

score 0 · Answer 1 · answered Feb 07 '17 at 21:09

You can get an array of all flipped cards and flip them back whenever a card is flipped like so:

var init = function() {
    var flippers = document.getElementsByClassName("flip");
    for (i = 0; i < flippers.length; i++) {
        flippers[i].addEventListener('click', function() {
            var cardID = this.dataset.targetid;
            var card = document.getElementById(cardID);
            var flipped = document.getElementsByClassName('flipped');
            for (i = 0; i < flipped.length; i++) {
                if (card !== flipped[i]) {
                    flipped[i].toggleClassName('flipped');
                }
            }
            card.toggleClassName('flipped');
        }, false);
    }
};
window.addEventListener('DOMContentLoaded', init, false);

Here is a link to a working demo JS FIDDLE

Thanks a lot! The demo doesn't work for me but the code you posted works :) — Louis, Feb 07 '17 at 21:16
No problem. I've updated the demo link so it should work now. — dnapierata, Feb 07 '17 at 21:18

css/javascript multiple card flip: reset other cards

1 Answers1