Question

I have two DIVs that need to occupy the same space on the page. The back DIV has some form elements and I am allowing the user to slide the front DIV in order to access the back DIV.

The problem is, the content below the front DIV is moving up on top of the back DIV. How can I fix this?

Here is an example of what I am doing now.

http://jsfiddle.net/7DFfa/3/

Thanks
Sheridan

Answer 1

You need to set the height of your wrapper:

$("#wrapper").height($("#front").height());

When you “slideUp” your #front div, your #wrapper div is losing its height.

See it working here: http://jsfiddle.net/7DFfa/4/

You’ll also need to toggle the z-index of your #back div so that the form elements can be accessed: http://jsfiddle.net/7DFfa/5/

$("#opener").toggle(function() {
    $("#front").stop().slideToggle(function() {
        $("#back").css("z-index", "1");
    });

    $(this).text("Show Front");
    }, function() {

    $("#back").css("z-index", "-1");
    $("#front").stop().slideToggle();

    $(this).text("Show Back")
});​

Alternatively, you could toggle both divs: http://jsfiddle.net/7DFfa/7/

$("#back").hide();
$("#wrapper, #back").height($("#front").height());

$("#opener").toggle(function() {
    $("#front").stop().slideToggle();
    $("#back").stop().slideToggle();
    $(this).text("Show Front");
    }, function() {
    $("#front").stop().slideToggle();
    $("#back").stop().slideToggle();
    $(this).text("Show Back")
});​