50% / 50% divs, on click 100% animation

Question

What am I doing:

I am working on a website with 2 different "sides", when you click on the left side, the left side need to be 100%. If you click on the right side, the right side has to be 100%.

Done already:

I have made the left and right side. And animated it with Jquery.

Problem
When you click on the left div the animation is working (It only worked when I added position absolute), but when I try to create the same animation for the right side; it isn't working! I created a jsFiddle so you can see the current code: http://jsfiddle.net/sh3Rg/

I can't make the right one work. When you click on the right div; it need to animate to 100%. Just like the left one.

Code

You can see a live preview and code here: http://jsfiddle.net/sh3Rg/

HTML:

<div id="left"></div>
<div id="right"></div>

JS:

<script>
$('#left').click(function(){
    $('#left').animate({width:'100%'}, 2500);
});
</script>
<script>
$('#right').click(function(){
    $('#right').animate({width:'100%'}, 2500);
});
</script>

CSS:

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
    background-color: #000000;
}
p { 
    cursor: pointer;
    color: #FFF;
}
#left {
    width: 50%;
    height: 100%;
    background: #666;
    float: left;
    cursor: pointer;
    position: absolute;
}
#right {
    width: 50%;
    height: 100%;
    background: #063;
    float: right;
    cursor: pointer;    
}

Hopefully someone can help me. Regards, Milan

PS: If I posted/did something wrong in this topic; I'm sorry, this is my first question.

Answer 1

I have done a small work around. I have edited your fiddle Please check it.

http://jsfiddle.net/sh3Rg/4/

$('#left').animate({width:'0%'}, 2500);
$('#right').animate({width:'100%'}, 2500);

Hope the code is clear to you. Please feel free in case of any doubts.

Answer 2

The problem is that #right grows to 100%, but it grows under the #left

You should place #right above the left container using a positioning other than static.

So the magic is:

• Use absolute or fixed positioning
• On click, change the z-index of the active element to be greater than the z-index of the other

 

#left, #right {
    width: 50%;
    height: 100%;
    cursor: pointer;
    position: absolute;
}
#left {
    left:0;
    background: #666;
}
#right {
    background: #063;
    right: 0;
}

And the script:

var Z = 0;
$('#left').click(function(){
    $('#left').css('z-index',Z++).animate({width:'100%'}, 2500);
});




$('#right').click(function(){
    $('#right').css('z-index',Z++).animate({width:'100%'}, 2500);
});

See working example: http://jsfiddle.net/sh3Rg/19/