Flip a DIV onclick

Question

Я использую плагин Flip!, чтобы перевернуть div на клик и вернуть флип, когда пользователь снова нажимает на div. Следующий код делает DIV flip, но не отбрасывает его назад, когда вы снова нажимаете его.

JavaScript

$(function(){ 
$("#flipbox").bind("click",function(){ 
    $("#flipbox").flip({ 
     direction:'rl', 
     content:'this is my new content', 
     onEnd: function(){ 
      $("#flipbox").bind("click",function(){ 
       $("#flipbox").revertFlip(); 
      }); 
     } 
    }) 
    return false; 
}); 

});

HTML

<div id="flipbox"> 
    Hello! I'm a flip-box! :) 
</div> 

Цените любую помощь.

Answer 1

Поставив состояние флипбокса на элемент, я использовал оператор if, чтобы проверить это состояние и определить, как перевернуть окно.
JSFiddle: http://jsfiddle.net/HP7mu/
Javascript:

$(function(){ 
$("#flipbox").bind("click",function(){ 
    if($(this).data('flipped')!="yes"){ 
    $("#flipbox").flip({ 
     direction:'rl', 
     content:'this is my new content', 
     onEnd: function(){ 
       $("#flipbox").data('flipped','yes'); 
     } 
    }); 
    }else{ 
     $("#flipbox").flip({ 
     direction:'rl', 
     content:'Hello! I\'m a flip-box! :)', 
     onEnd: function(){ 
       $("#flipbox").data('flipped','no'); 
     } 
    }); 
    } 
    return false; 
}); 
}); 

Html: То же
Примечания: Как показано в комментариях ниже Асад имеет еще лучшее решение для этого, просто используя revertFlip для возврата если в коде запускается else.