Question

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 that 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!

Answer 1

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