Multiple card flip using getElelementsByClass

Question

I'm doing a card flip using CSS3 and javascript on multiple divs. I'm using desssandro's 3d Card Flip but his is only using an ID and therefore one div at a time. I have several cards in one page that I want to flip. How can I do it?

Here's the desandro's script and a fiddle

http://jsfiddle.net/vanduzled/nawdpj5j/

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

If I make my divs a class instead of id's, the script below doesn't work:

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

EDIT

I created a fiddle byclassname but it doesn't work

http://jsfiddle.net/vanduzled/omLac95t/

Answer 1

Try this http://jsfiddle.net/nawdpj5j/6/ I'll leave the styling to you. getElementsByClassName returns an array so you need to go through the elemnts in the array and call toggleClassName on each. I also modified the css to replace #card with .card

var init = function() {
  var cards = document.getElementsByClassName("card");  
  document.getElementById('flip').addEventListener( 'click', function(){
      for (i = 0; i < cards.length; i++){
         cards[i].toggleClassName('flipped');
      }
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

Update:

See http://jsfiddle.net/nawdpj5j/10/

add data-targetid to flip buttons:

<button class="flip" data-targetid="card">Flip Card</button>

Get all flip items and find the button to flip from button's dataset:

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);
    }
};

Answer 2

There are a couple of issues:

1. The click event is being added to the button, so it should be getElementsById('flip') .
2. Retrieving the card should be getElementsByClassName or you can use jQuery's $('.card') .
3. The html and css are written for a single card.

---

var init = function() {
    var cards = $('.card');

    document.getElementById('flip').addEventListener( 'click', function(){
        $.each(cards, function( key, value ) {      
            value.toggleClassName('flipped');
        });
    }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

Here is a solution that works for multiple cards: http://jsfiddle.net/pwee167/nawdpj5j/7/

Answer 3

You can check out the top solution for this question .

The answer basically assigns the return value of getElementByClassName() to an array an then traverses it. When applied to you problem, it might look like this:

Also, Working JSfiddle .

var init = function() {
  var cards = document.getElementsByClassName('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    for (var x=0; x<cards.length; x++) {  
      cards[x].toggleClassName('flipped');
    }
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);