Rotate CSS card with jquery and “this”

Question

I use the following code to rotate my CSS card. The problem is when I have a few cards and they all rotate when clicking any button.

I would like to rotate only the card which contains clicked button.

I suppose I should to add a context to my cards by using 'this', but I cannot do it right.

  $('button').click(function () { $('.card').toggleClass('flipped'); }); 

 .animation { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .cardContainer { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; /*depth of the elements */ -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; /*border: 1px solid #ff0000;*/ padding-left: 1%; } .card { width: 99%; height: 200px; /*transition effects */ -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; transition: transform 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped: {} .card .front, .card .back { display: block; height: 100%; width: 100%; line-height: 60px; color: white; text-align: center; font-size: 4em; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); } .card .back { width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px; } .card .back { background: #03446A; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card1</h3></div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 1</button> </div> <br> <br> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card2</h3></div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 2</button> </div> 

Answer 1

I would like to rotate only the card which contains clicked button.

The cards don't contain the button, but their parents do. You can use closest to find the cardContainer , then find to find the card :

$('button').click(function () {
    $(this).closest('.cardContainer').find('.card').toggleClass('flipped');
});

 $('button').click(function() { $(this).closest('.cardContainer').find('.card').toggleClass('flipped'); }); 

 .animation { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .cardContainer { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; /*depth of the elements */ -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; /*border: 1px solid #ff0000;*/ padding-left: 1%; } .card { width: 99%; height: 200px; /*transition effects */ -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; transition: transform 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card.flipped { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .card.flipped: {} .card .front, .card .back { display: block; height: 100%; width: 100%; line-height: 60px; color: white; text-align: center; font-size: 4em; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); } .card .back { width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px; } .card .back { background: #03446A; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card1</h3> </div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 1</button> </div> <br> <br> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card2</h3> </div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 2</button> </div> 

Or as they're siblings, use siblings :

$('button').click(function () {
    $(this).siblings('.card').toggleClass('flipped');
});

 $('button').click(function() { $(this).siblings('.card').toggleClass('flipped'); }); 

 .animation { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .cardContainer { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; /*depth of the elements */ -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; /*border: 1px solid #ff0000;*/ padding-left: 1%; } .card { width: 99%; height: 200px; /*transition effects */ -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; transition: transform 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card.flipped { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .card.flipped: {} .card .front, .card .back { display: block; height: 100%; width: 100%; line-height: 60px; color: white; text-align: center; font-size: 4em; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); } .card .back { width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px; } .card .back { background: #03446A; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card1</h3> </div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 1</button> </div> <br> <br> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card2</h3> </div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 2</button> </div> 

Answer 2

Use sibling for it. Check following JQuery:

 $('button').click(function () { $(this).siblings(".card").toggleClass('flipped'); }); 

 .animation { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .cardContainer { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; /*depth of the elements */ -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; /*border: 1px solid #ff0000;*/ padding-left: 1%; } .card { width: 99%; height: 200px; /*transition effects */ -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; transition: transform 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped: {} .card .front, .card .back { display: block; height: 100%; width: 100%; line-height: 60px; color: white; text-align: center; font-size: 4em; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); } .card .back { width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px; } .card .back { background: #03446A; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card1</h3></div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 1</button> </div> <br> <br> <div class="col-md-3 cardContainer"> <div class="card red"> <div class="front"> <h3 class="cardTitle">Card2</h3></div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button">Rotate card 2</button> </div> 

Answer 3

You can add context using attributes in html that will also be the class of the cards as shown below. .sibling() in jquery will also work but it needs your html to have exact same sequence of elements

  $('button').click(function () { var cardClass=$(this).attr('data-card'); $('.'+cardClass).toggleClass('flipped'); }); 

 .animation { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .cardContainer { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; /*depth of the elements */ -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; /*border: 1px solid #ff0000;*/ padding-left: 1%; } .card { width: 99%; height: 200px; /*transition effects */ -webkit-transition: -webkit-transform 0.6s; -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; transition: transform 0.6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .card.flipped { -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .card.flipped: {} .card .front, .card .back { display: block; height: 100%; width: 100%; line-height: 60px; color: white; text-align: center; font-size: 4em; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26); } .card .back { width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px; } .card .back { background: #03446A; -webkit-transform: rotateY( 180deg); -moz-transform: rotateY( 180deg); -o-transform: rotateY( 180deg); transform: rotateY( 180deg); } .red { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3 cardContainer"> <div class="card red card-1"> <div class="front"> <h3 class="cardTitle">Card1</h3></div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button" data-card="card-1">Rotate card 1</button> </div> <br> <br> <div class="col-md-3 cardContainer"> <div class="card red card-2"> <div class="front"> <h3 class="cardTitle">Card2</h3></div> <div class="back"> <div class="content"> </div> </div> </div> <button type="button" data-card="card-2">Rotate card 2</button> </div> 

Answer 4

You can use .prev() to get the previous sibling which in your example is the card, but be aware that changes to your html structure could break it.

$('button').click(function () {
  $(this).prev().toggleClass('flipped');
});