flip between two divs when clicking on the divs
<p>I want to have the same flip thing as here in the example:</p>

<p><a href="http://jsfiddle.net/lakario/VPjX9/" rel="nofollow">http://jsfiddle.net/lakario/VPjX9/</a></p>

<p>the only different that I want is that the flip between the two div's(page1,page2) - will be when I'm clicking on then and not with a button.</p>

<p>here is the code:</p>

<pre><code>HTML:

&lt;button type="button" id="go"&gt;FLIP&lt;/button&gt;
&lt;div class="container"&gt;
     &lt;div class="page1"&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod mauris    metus, ac consectetur felis. Cras consectetur, est vel malesuada faucibus, ligula enim suscipit elit, ut ornare quam urna quis felis. In hac habitasse platea dictumst.
     &lt;/div&gt;
   &lt;div class="page2"&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum, odio vel   condimentum varius, nibh nunc 
    &lt;/div&gt;
&lt;/div&gt;


 JS:

$('#go').click(function() {
var page1 = $('.page1');
var page2 = $('.page2');
var toHide = page1.is(':visible') ? page1 : page2;
var toShow = page2.is(':visible') ? page1 : page2;

toHide.removeClass('flip in').addClass('flip out').hide();
toShow.removeClass('flip out').addClass('flip in').show();
});​
</code></pre>
