Stacking panels in JQuery. The panels have images as their content and should have a small tab of each image visible
<p>How can I stack the images to that a tab of of the panels sticks out but does not slide out until the click event occurs?
 I grabbed this code from online but I'm not sure how to modify for what I need done.</p>

<p><strong>HTML &amp; JQUERY</strong></p>

<pre><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
    &lt;html xmln`enter code here`s="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Panels With jQuery&lt;/title&gt;
    &lt;link rel="stylesheet" href="style3.css" type="text/css" media="screen" /&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;

    $(document).ready(function() {
    $('#container').css({position:'relative'});
    $(".div1, .div2, .div3").each(function(i,d){
        $(d).css({marginLeft:'-'+$(d).width()+'px',top:'0px',position:'absolute'});

    });
    $('.div1').css({marginLeft:'0px'}).addClass('current');
    $("nav a").click(function() {
        var cls = this.name;
        $('.current').removeClass('current').animate({marginLeft:'-         '+$(this).width()+'px'},1000);
        $('.'+cls).addClass('current')
        setTimeout(function(){
            $('.'+cls).animate({marginLeft:0});
        },1000);

    });
});
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;nav&gt;
    &lt;a name="div1"&gt;SlideToggle Div 1&lt;/a&gt;
    &lt;a name="div2"&gt;SlideToggle Div 2&lt;/a&gt;
    &lt;a name="div3"&gt;SlideToggle Div 3&lt;/a&gt;
    &lt;/nav&gt;

    &lt;div id="container"&gt;
    &lt;div class="div1"&gt;Content Div 1&lt;/div&gt;
    &lt;div class="div2"&gt;Content Div 2&lt;/div&gt;
    &lt;div class="div3"&gt;Content Div 3&lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;

**JQUERY CODE:**

    .div1 {
    width:800px;
    height:500px;
    background:url(photo1.png)no-repeat;
    }

    .div2 {
    width:800px;
    height:500px;
    background:url(photo3.png)no-repeat;
    }

    .div3 {
     width:800px;
     height:500px;
    background:url(photo2.jpg)no-repeat;
    }
</code></pre>
