javascript - Weird behavior of .toggleClass() method -

javascript - Weird behavior of .toggleClass() method -

i have 2 div elements (cards) want perform flip effect (using css3). problem when user clicks on div element (i. e. card) cards flipped. want flip div (card) clicked, not divs. can told me problem?

here jsfiddle demo:

jsfiddle

here code used:

html:

<div class="flip-container"> <div class="flipper" id="flipper"> <div class="front"> </div> <div class="back"> <img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/skull-1-icon.png"> </div> <div class="front"> </div> <div class="back"> <img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"> </div> </div> </div>

javascript:

/*jquery incuded */ $(".flipper").click(function(){ var id = $(this).attr("id"); document.getelementbyid(id).classlist.toggle('flipped'); });

css:

/* entire container, keeps perspective */ .flip-container{ /*perspective*/ -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; -o-perspective:1000; perspective:1000; display: table; margin: 0px auto; width: auto; } /* flip pane when hovered */ .flipped { /*transform*/ -webkit-transform:rotatey(180deg); -moz-transform:rotatey(180deg); -ms-transform:rotatey(180deg); -o-transform:rotatey(180deg); transform:rotatey(180deg); } .front, .back{ float: left; width: 100px; height: 120px; margin: 5px; padding: 5px; border: 4px solid #ee872a; cursor: pointer; border-radius: 10px; box-shadow: 0 1px 5px rgba(0,0,0,.5); z-index:2; background: #b1b1b1; /*backface-visibility*/ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; } /* flip speed goes here */ .flipper { /*transition*/ -webkit-transition:0.6s; -moz-transition:0.6s; -o-transition:0.6s; transition:0.6s; /*transform-style*/ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; position:relative; } /* hide of pane during swap */ /* front end pane, placed above */ /* back, hidden pane */ .back{ /*transform*/ -webkit-transform:rotatey(180deg); -moz-transform:rotatey(180deg); -ms-transform:rotatey(180deg); -o-transform:rotatey(180deg); transform:rotatey(180deg); z-index:3; }

this should trick http://jsfiddle.net/wvvey/61/

<div class="flip-container"> <div class="flipper"> <div class="front"></div> <div class="back"> <img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/skull-1-icon.png"> </div> </div> <div class="flipper"> <div class="front"></div> <div class="back"> <img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"> </div> </div> </div> $(".flipper").click(function () { $(this).toggleclass('flipped'); });

javascript jquery html css css3