I am attempting to replicate the Toggle open/close div effect shown in the sample image below:
https://i.sstatic.net/geAQa.png
Css:
.area1 {
width: 50px;
height: 200px;
background: red;
display: inline-block;
z-index:99;
}
.area2 {
width: 50px;
height: 200px;
background: green;
display: inline-block;
z-index:99;
}
Jquery
$("#Go2").click(function () {
$(".area1").animate({width:'toggle'},350);
$(".area2").hide();
});
$("#Go").click(function () {
$(".area2").animate({width:'toggle'},350);
$(".area1").hide();
});
http://jsfiddle.net/gislef/kcve9qhg/
I have tried using z-index, but it did not work as expected
SOLUTION
http://jsfiddle.net/gislef/kcve9qhg/6/
Special thanks to @D.Gramm