JQuery animation and z-index are not working correctly

Question

I am trying to make two panels which can be opened and closed by two buttons.

FIDDLE

All is working fine, when I do like this:

1. Open red panel.
2. Open green panel.
3. Close red panel.

In this case red panel is hiding behind green during animation.

But when I do like this:

1. Open green panel.
2. Open red panel.
3. Close green panel.

The green panel always in front of red panel during animation.

But the first opened panel has z-index: 9 and the second opened one has z-index: 10.

Please, help me to solve the problem.

Answer 1

The reason why it goes above it is due to the html. the red was created before the green so the only way to make them animate 'underneath' each other every time would be to edit the z-index programmatically through the if statements

In the if statements just change z-index :

if ($messengerPanel.hasClass('open')) {
    sidebarPanelClose($messengerPanel);
    $("#green").css("z-index", "1");
} else {
    sidebarPanelOpen($messengerPanel);
    $("#green").css("z-index", "10");
}

Same for red too ...

Updated fiddle : http://jsfiddle.net/rcotjr5y/4/

Answer 2

check whether it will work include in css

 .open-first{
    z-index:-1 !important;
}
.open{
    z-index:1;
}