Automatically collapse div based on available margin space
<p>I'm toggling between two panels in jquery; </p>

<ul>
<li>A side menu with a collapse link</li>
<li>A collapsed div with an expand link.</li>
</ul>

<p>By default, the side menu is shown regardless of margin space and screen size. That is, if the margin space between my menu and the center wrapper is a negative number (if they overlap), then I get a messy overlap of the menu on my content wrapper.</p>

<p>How can I detect margin space between positions (left:0px) and (wrapper margin-left) and based on that calculation, either show the expanded or collapsed state?</p>

<pre><code>jQuery(document).ready(function($) {
    $("#hidePanel").click(function() {
        $("#panel").animate({
            marginLeft: "-175px"
        }, 500);
        $("#colleft").animate({
            width: "0px",
            opacity: 0
        }, 400);
        $("#showPanel").show("normal").animate({
            width: "28px",
            opacity: 1
        }, 200);
        $("#colright").animate({
            marginLeft: "50px"
        }, 500);
    });
    $("#showPanel").click(function() {
        $("#colright").animate({
            marginLeft: "200px"
        }, 200);
        $("#panel").animate({
            marginLeft: "0px"
        }, 400);
        $("#colleft").animate({
            width: "175px",
            opacity: 1
        }, 400);
        $("#showPanel").animate({
            width: "0px",
            opacity: 0
        }, 600).hide("slow");
    });
});​
</code></pre>
