jQuery Slide Plugin Positional Problem

I have been using the Slide plugin to slide a div in to replace another div. Here is my code:

http://jsbin.com/iwemaq/15

I have had to make the position of the second div absolute so t开发者_开发技巧hat it would stay level with the existing div. If you take this out of the example it will force the first div down and it won't be level with the second as it animates. However the height of the container no longer sticks with the content. How can I achieve this effect?

I want the 2 divs to be able to move back and forth, while level and keeping the container for both divs, any advice would really help! Thanks!

---

If I am understanding your question correctly by container you mean the border around the content. If this is correct, then a simple solution is to set the height of the container div to be the height of the div that is currently displayed when the animation completes:

<script>
    jQuery(document).ready(function() {

        jQuery("#showInstructionsPanel").live("click", function() {

            jQuery('#mainContentContainer').hide('slide', {
                direction: 'left'
            }, 1000);

            jQuery('#instructionsPanel').show('slide', {
                direction: 'right'
            }, 1000, function () { jQuery('#container').height(jQuery(this).height()); });
        });

        jQuery("#hideInstructionsPanel").live("click", function() {

            jQuery('#mainContentContainer').show('slide', {
                direction: 'left'
            }, 1000, function () { jQuery('#container').height(jQuery(this).height()); });

            jQuery('#instructionsPanel').hide('slide', {
                direction: 'right'
            }, 1000);
        });


    });
</script>

Edit: Here is another version that animates the height of the container to avoid the jumping that happens with the version posted above. http://jsbin.com/iqovox

---

I have an alternative, perhaps a bit more elegant solution (see http://jsfiddle.net/MM3D4/):

CSS:

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#container {
    display: block;
    width: 100%;
    overflow: hidden;  
}
#panelWrapper {
    display: block;
    width: 200%;   
}

#instructionsPanel, #mainContentContainer {
    display: inline-block;
    width: 49.8%;
}

HTML:

<div id="container" style="border:thin black solid">
    <div id="panelWrapper">
        <div id="mainContentContainer">
            <a href="#" style="color:blue;text-decoration:underline" id="showInstructionsPanel">See Help column</a>
            <div class="heading2">Main Content</div>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
        </div>
        <div id="instructionsPanel">
            <a href="#" style="color:blue;text-decoration:underline" id="hideInstructionsPanel">&gt;- Click here to Go Back</a>
            <div class="heading2">Help Panel</div>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
        </div>
    </div>
</div>

Javascript:

jQuery(document).ready(function() {
    jQuery("#showInstructionsPanel").live("click", function(e) {
        jQuery('#mainContentContainer').animate({'margin-left':'-50%'}, 1000);
        e.preventDefault();

    });  
    jQuery("#hideInstructionsPanel").live("click", function(e) {  
        jQuery('#mainContentContainer').animate({'margin-left':'0'}, 1000);
        e.preventDefault();
    });

});