JQuery animation and z-index not working correctly

Question

I am trying to make two panels that can be opened and closed with two buttons.

Fiddle

Everything works fine when I like it:

• Open the red panel.
• Open the green panel.
• Close the red panel.

In this case, the red panel hides behind the green color during the animation.

But when I like it:

• Open the green panel.
• Open the red panel.
• Close the green panel.

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

But the first open panel has z-index: 9 , and the second open has z-index: 10 .

Please help me solve the problem.

Answer 1

The reason it is above is due to html. red was created to green, so the only way to make them come to life underneath each time, each time, will edit the z-index programmatically using if statements

In if statements, just change the z-index:

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

The same goes for red too ...

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

Answer 2

check if this will work include in css

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