jQuery function to flip an image on click

Question

I've written some css to flip an image. It's working fine, but I want to convert it to a function so that I can call that function in an `onclick` event. A demo of what I have so far can be found here: http://jsfiddle.net/Spokey/ggUue/1/ Here's the HTML for the image: ```

Some text inside here

``` This is the CSS: ``` .f1_container { position: relative; margin:10px; width: 450px; height: 281px; z-index : 1; float:left; } .f1_container { -webkit-perspective: 1000; perspective: 1000; } .f1_card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } .f1_container:hover .f1_card { -webkit-transform: rotateY(180de…

Accepted Answer

It's pretty simple to add this to your current solution:

CSS

Replace the `:hover` state with a class:

```
.f1_container:hover .f1_card {}
/* becomes */
.f1_container.active .f1_card {}
```

JavaScript

Add this JavaScript part that toggles the new class on click:

```
$('.f1_container').click(function() {
    $(this).toggleClass('active');
});
```

Demo

Try before buy

jQuery function to flip an image on click

Solution

Problem