Animate only one part of the panel instead of the whole screen using JQtouch

Question

Hello, I have a code in which I need to animate (flip) only the top part of the panel if the user clicks on the top or the bottom part of the user clicks on the bottom and leave the other panel stationary.

The HTML code:

       <div id="about">
         <div class="toolbar">
          <h1>About</h1>
           <a class="button back" href="#">Back</a>
            </div>
          <div>
          <p>Click on the image to change.</p>
        <ul class="edgetoedge">
    <li id="toppanel"><a id="toplink" href="#top">Recent 
<img src="1.jpg" id="topimg" width=128 height=128></a></li>
     <li id="bottompanel"><a id="botlink" href="#bot">Favourites 
<img src="2.jpg" id="botimg" width=128 height=128></a></li></ul>
    </div>
    </div>

So when a user clicks on the top li tag or a tag or even the image tag I would like only the corresponding li to flip to reveal a new li with new text and a different image in it. I guess I can insert a new li or change the text and image with $('.topimg).attr(src,newsource) but how do I flip the li to reveal the new li?

I have been trying to figure this out since morning but my tiny brain is unable to wrap around this problem. Help please!