sliding, overlapping panes

by lbstr

HTML

<div class="wrap">
    <div class="top sec">
        <header>header</header>
        <main>main</main>
        <footer><a class="tog">Toggle</a>footer</footer>
    </div>
    <div class="bottom sec">
        <header><a class="tog">Toggle</a>header</header>
        <main>main</main>
        <footer>footer</footer>
    </div>
</div>

CSS

.wrap {
    color: white;
    overflow: hidden;
    position: relative;
}

.sec {
    position: absolute;
    width: 100%
}

.top {
    z-index: 2;
}

.bottom {
    z-index: 1;
    display: none;
}

.bottom-mode .top {
    z-index: 1;
}

.bottom-mode .bottom {
    z-index: 2;
}

header { 
    background-color: red;
    height: 40px;
}
main {
    background-color: green;
    height: 100px;
}
footer {
    background-color: blue;
    height: 40px;
    
}

.tog {
    float: right;
    margin-right:20px;
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

$(document).ready(function(){
    var $wrap = $('.wrap'),
        $top = $wrap.find('.top'),
        $btm = $wrap.find('.bottom');
    
    var setWrapHeight = function(){
        $wrap.animate({height: ($wrap.hasClass('bottom-mode') ? $btm.height() : $top.height()) }, 1000);
    };
    
    
    setWrapHeight();
    
    $('.tog').click(function(){
        var $tog = $(this),
            isTop = $tog.closest('.top').length,
            topPos, btmPos;
        
        if (isTop) {
            topPos = -($top.height() - $top.find('footer').height());
            btmPos = 0;
            $btm.show();
        }
        else {
            topPos = 0;
            btmPos = ($top.height() - $top.find('footer').height());
        }
        
        $top.animate({top:topPos}, 2000);
        $btm.animate({top:btmPos}, 2000, function(){
            $wrap.toggleClass('bottom-mode', isTop);
            setWrapHeight();
            if (!isTop) {
                $btm.hide();
            }
        });
        
    });
    
    
    
    
});