TargetID for IE10

by vanduzled

HTML

<script src="http://desandro.github.io/3dtransforms/js/utils.js"></script>
                        <article>

                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');" id="card-1">
                                <div class="flipper">
                                    <div class="front">
                                        <!-- front content -->

                                                <h2>Frontal One</h2>

                                                <p>Lorem Ipsum</p>

                                    </div>
                                    <div class="back">
                                        <!-- back content -->

                                                <h2>Back One</h2>
                                                <p>Dolor sit ammet met</p


                                    </div>
                                </div>
                            </div>

                            <button data-targetid="card-1" class="flip btn btn-default">Flip One</button>

                        </article> <!-- first -->


                        <article>

                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');" id="card-2">
                                <div class="flipper">
                                    <div class="front">
                                        <!-- front content -->

                                                <h2>Frontal Two</h2>

                                                <p>Lorem Ipsum</p>

                                    </div>
                                    <div class="back">
                                        <!-- back content -->

                                                <h2>Back Two</h2>
                                                <p>Dolor sit ammet met</p


                                    </div>
                                </div>
                           ...

CSS

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container.flipped .back {
		transform: rotateY(0deg);
	}
	.flip-container.flipped .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {

}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;

	width: 200px;
	height: 156px;
	margin: auto;

}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;

	border: 4px solid #323232;
	padding: 20px;
}

/*  UPDATED! front pane, placed above back */
.front {
	background: #fff;
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	background: #fff;
	transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
		
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
		
	    transform: rotateX(180deg);
	}

JavaScript

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

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

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