Hello,
I try to implement this neat flipping feature described here:
http://davidwalsh.name/css-flip
My goal is to have an element inside carousel component that can be flipped by clicking on it.
Unfortunately I can't find the proper way to add 'flip' class via classList.toggle method provided by David Walsh.
I tried to do like this
$('#TutorialCarousel [name="TutorialItem_2"]').classList.toggle("flip");
or this
$("[rerender=TutorialCarousel]").find("name='TutorialItem_2']").classList.toggle("flip");
or this
$("[rerender=TutorialCarousel] [name='TutorialItem_2']").classList.toggle("flip");
or this
$('#Tutorial_mobilecontainer [name="TutorialItem_2"]').classList.toggle("flip");
but I get this error all the time 
Uncaught TypeError: Cannot call method 'toggle' of undefined
so obviously my selector is incorrect.
Can you please give me some clues how to solve this problem?
'TutorialItem_2' is the container with elements being flipped.
All these elements were given required CSS classes by this code:
$(document).find("[name='TutorialItem']").addClass('flip-container');
$(document).find("[name='ImageGrid']").addClass('flipper');
$(document).find("[name='TutorialImage']").addClass('front');
$(document).find("[name='InnerGridReverse']").addClass('back');
and the CSS is like this:
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
/* entire container, keeps perspective */
.flip-container {
.flip-container, .front, .back {
width: 320px;
height: 480px;
}*
/* flip speed goes here */
.flipper {
transition: 0.6s;
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;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}