DIV order swapping / toggling

Question

Hi... I'm hoping that someone might be able to give me some heads up on DIV order swapping, and how best to achieve this via jQuery. Basically what I have is 2 divs... #Front and #Back and a div for toggling which DIV is displayed in the foreground.The effect I am after is not a 'show and hide' as both divs are displayed at the same time, but only one can be in the foreground.

Many thanks in advance Decbrad

Answer 1

This should do it for you:

CSS

#Front, #Back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.front {
    z-index: 2;
}

jQuery

$('#Front').addClass('front');
$('#toggler').click(function(){
    $('#Front').toggleClass('front');
    $('#Back').toggleClass('front');
});