Multiple Card Flip jQuery

Question

I'm looking to have multiple cards flip individually, but I'm not that well versed in jQuery/JS and I'm having issues with figuring out the code, and could use a little help. Also, the tiles aren't flipping back over when clicked.

 $('.js-click').on('click', function() { $('.card').not(this).removeClass('flipped'); $('.card').toggleClass('flipped'); }); $('.js-click1').on('click', function() { $('.card').not(this).removeClass('flipped'); $('.card').toggleClass('flipped'); }); 

 .flipContainer { width: 260px; height: 200px; position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { display: block; height: 100%; width: 100%; line-height: 200px; color: white; text-align: center; font-weight: bold; font-size: 12px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: red; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="flipContainer"> <div class="card"> <button class="js-click">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section> <section class="flipContainer"> <div class="card"> <button class="js-click1">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section> 

Answer 1

First you'll want to give both cards the class of js-click so that you can target both of them with the same $('.js-click') selector. Then as you want to flip the target's .card , all you have to do is toggle the class flipped on $(this).parent() .

This can be seen in the following:

 $('.js-click').on('click', function() { $(this).parent().toggleClass('flipped'); }); 

 .flipContainer { width: 260px; height: 200px; position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { display: block; height: 100%; width: 100%; line-height: 200px; color: white; text-align: center; font-weight: bold; font-size: 12px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: red; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="flipContainer"> <div class="card"> <button class="js-click">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section> <section class="flipContainer"> <div class="card"> <button class="js-click">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section> 

Answer 2

Looks like the issue came from trying to find the appropriate .card element (looks like it was finding both of them) and then removing a class + toggling a class will always add it:

1. remove .flipped
2. toggle .flipped
3. .flipped is always added

so you'll never turn your cards back over.

Quick fix, look for the clicked element's parent() and target that...

 $('.js-click').on('click', function() { $(this).parent('.card').toggleClass('flipped'); }); 

 .flipContainer { width: 260px; height: 200px; position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { display: block; height: 100%; width: 100%; line-height: 200px; color: white; text-align: center; font-weight: bold; font-size: 12px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: red; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="flipContainer"> <div class="card"> <button class="js-click">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section> <section class="flipContainer"> <div class="card"> <button class="js-click">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section> 

Answer 3

You are toggling the flipped class on all elements with .card what you need it to do it just for the associated elements like

$(this).closest('.card').toggleClass('flipped');

Moreover, you can reduce your code by assigning js-click class to both buttons

Here is snippet

 $('.js-click').on('click', function() { $(this).closest('.card').toggleClass('flipped'); }); 

 .flipContainer { width: 260px; height: 200px; position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { display: block; height: 100%; width: 100%; line-height: 200px; color: white; text-align: center; font-weight: bold; font-size: 12px; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card .front { background: red; } .card .back { background: blue; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="flipContainer"> <div class="card"> <button class="js-click">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section> <section class="flipContainer"> <div class="card"> <button class="js-click">+</button> <div class="front">Custom Installation</div> <div class="back">Custom Installation details</div> </div> </section>