CODEWITHSUNDEEP
jquery
user1844586
user1844586

Reputation: 37

flip between two divs when clicking on the divs

I want to have the same flip thing as here in the example:

http://jsfiddle.net/lakario/VPjX9/

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.

here is the code:

HTML:

<button type="button" id="go">FLIP</button>
<div class="container">
     <div class="page1">
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.
     </div>
   <div class="page2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum, odio vel   condimentum varius, nibh nunc 
    </div>
</div>


 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();
});​

Upvotes: 3

Views: 2560

Answers (2)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Simple, just update your click selector from $('#go') to $('.page1, .page2'):

$('.page1, .page2').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();
});​

DEMO

Upvotes: 3

Hoang Huynh
Hoang Huynh

Reputation: 1403

Just change your javascript to this:

$('.container').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();
});​

Upvotes: 1

Related Questions