Question

How can I flip the modal below which has multiple divs?

<div id="modal">

 <div id="box1front" class="window">

  <div class="header">
   <div class="headerinner">
    <div class="modalclose"><a href="#" class="close">X</a></div>
    <div class="modalheading">Title</div>
   </div>
  </div>

  <div class="contents">
   <div class="other">
    <div class="otherinner">
     <button>View Back</button>
    </div>
   </div>
   <div class="copy">
    <div class="copyinner">
     <p>[FRONT]</p>
    </div>
   </div>
  </div>

 </div>

 <div id="box1back" class="window">

  <div class="header">
   <div class="headerinner">
    <div class="modalclose"><a href="#" class="close">X</a></div>
    <div class="modalheading">Title</div>
   </div>
  </div>

  <div class="contents">
   <div class="other">
    <div class="otherinner">
     <button>View Front</button>
    </div>
   </div>
   <div class="copy">
    <div class="copyinner">
     <p>[BACK]</p>
    </div>
   </div>
  </div>

 </div>

</div>

I would want it to flip from box1front to box1back when I click on the buttons.

There will be multiple modals on this page (obviously not all open at once). They would each have their own IDs following the format above.

I would greatly appreciate it if someone would be able to help me.

Cheers,

Ash

Answer 1

Check http://blog.guilhemmarty.com/flippy/

I don’t know how to do the flip(probably can if I googled a little) but the link above has the flip effect, if you google jquery flip effect there are lot of results. to change the content is easy.

Update:

var contentVar = $('#box1back').html();

$("#flipbox").flip({
    direction:'tb',
    content: contentVar
});

Something like that

Update: i did some digging and here is a working sample

http://jsfiddle.net/tvdCk/19/