misdirection misdirection - 6 months ago 55
CSS Question

flip thumbnail via button click

I found this sample and it looks good, so I put a thumbnail from bootstrap.

http://www.bootply.com/129165

And I like to implement it to the site my developing.

http://hotmeltcoatingmachines.com/

what I want is to flip the thumbnail thru button click.
How can I do that.

Thanks

<div class="flip">
<div class="card">
<div class="face front">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>front</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Flip</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="face back">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>back</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">flip</a></p>
</div>
</div>
</div>
</div>
</div>
</div>


sample code
http://www.bootply.com/pZXSuyPPWx

Answer

change JQuery code like this

$('.fliper-btn').click(function(){
    $('.flip').find('.card').toggleClass('flipped');

});

and give flip action buttons a custom class name like 'fliper-btn' and add it like this

<a href="#" class="btn btn-primary fliper-btn" role="button">Flip</a>
Comments