Css3 Convert Boot Flip Card

Question

I want to create a bootstrap flash card using CSS3 conversion. I started with this working and basic example.

However, I wanted to change it to have a fixed elevation map and some minor improvement. In particular, I needed to flip the map when the user clicks on the icon that I created in the upper right corner.

I changed the code as you see here .

The problem is that the card does not flip to the front after the correct transfer to the back side.

Can anyone suggest any solution?

Note: the problem seems to be related to jquery code. I actually have

$('div.flipControl').on('click', function () { $(this).closest('div[class="card"]').toggleClass('flipped'); }); 

But if I use it

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

Everything works as expected.

Answer 1

I think it is much easier to use the CSS class selector directly.

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

demo