jQuery function to move a div left/right when clicking another div
<p>Yes, this sounds like a simple question, and it probably is. But when i am implementing some of the solutions I an finding, not of them are working.</p>

<p>Basically I have a main content div and behind that div I have a small sidebar div that I would like to animate out from behind the main div when i click on an element. Seems simple? Well my head can't quite code it right.. Also, jQuery noob here if we are going to be completely honest:</p>

<p>Here is the relevent HTML:</p>

<pre><code>        &lt;div id="clickme" style="z-index: 900; background-color:Black; width: 50px; height: 50px;"&gt;&lt;/div&gt;

    &lt;div id="superMain"&gt;
        &lt;div id="leftFlyout"&gt;&lt;/div&gt;
        &lt;div class="main"&gt;&lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;&lt;/div&gt;
        &lt;div id="rightFlyout"&gt;&lt;/div&gt;
    &lt;/div&gt;    
</code></pre>

<p>Here is the CSS</p>

<pre><code>#rightFlyout
{
width: 75px;
height: 400px;
background-color: Red;
position: absolute;
top: 0;
left: 875px;

}

#leftFlyout
{
float:left;
width: 75px;
height: 400px;
background-color: Red;
position: absolute;
top: 0;
left: 10px;

}

#superMain
{
position:relative;
}
.main
{
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
padding: 0px;
padding-top: 10px;
margin: 0px auto;
min-height: 420px;
height:auto;
width: 940px;
background-color: White;
z-index: 10;
}
</code></pre>

<p>annnnnnd, the jQuery (the whole header in case i messed that up too somehow)</p>

<pre><code>&lt;head runat="server"&gt;
&lt;script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;title&gt;&lt;/title&gt;
&lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
&lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
&lt;/asp:ContentPlaceHolder&gt;
&lt;script&gt;
    $('#clickme').toggle(function () {

        $('#rightFlyout').animate({
            left: '+=200'
        }, 458, 'swing', function () {

            // Animation complete. CALLBACK?

        });

    }, function () {

        $('#leftFlyout').animate({
            left: '-=200'
        }, 458, 'swing', function () {

            // Animation complete. CALLBACK?

        });

    });
&lt;/script&gt;
&lt;/head&gt;
</code></pre>

<p>Please help! And if it is a ridiculously dumb mistake I am making, please mock relentlessly. </p>
