Some jQuery Animate question

First and foremost, my jQuery really sucks. I have a ‘ul’ in a WordPress loop that renders the following output – the ‘li’ tags are the individual posts within the loop.

<ul id="list">
<li class="box">
    <div class="front">
        <h3> Some Front Stuff </h3>
        <p> Some front paragraph...</p>
    </div>
    <div class="back">
        <h3> Some back Stuff </h3>
        <p> Some back stuff.. </p>
    </div>
</li>
<li class="box">
    <div class="front">
        <h3> Some Front Stuff </h3>
        <p> Some front paragraph...</p>
    </div>
    <div class="back">
        <h3> Some back Stuff </h3>
        <p> Some back stuff.. </p>
    </div>
</li>
etc...etc..etc

What I want is something that can be viewed here: http://www.aatsol.co.za/temp/some_jquery/

I simply want the user to click on the “View more details” and have the second div slide over the first to display the contact details which are on the “back div”

The other thin is I want only the ‘X’ to appear on the contact details – to allow the user to close the windows and return to the first div. I have tried to do something but I can’t get any further – 2 weeks working on 3 lines of jQuery. You help is highly appreciated.

My jQuery:

$(document).ready(function() {
$(".box").click(function(){
    $(this).find('.inner').stop().animate({top:0});
});

// to close back div - not even touched
$("a.close").click(function(){
    alert("close");
    $(this).find('.inner').stop().animate({top:340});
});});

How will I have to tune up the jQuery to get the desired results?

NB: The jQuery is kinda working on the static html which look 99.9% like my WordPress loop but nothing is happening on the WordPress 🙁