Click from right animation

by sach_a

HTML

<div class="wrap" data-id='0'>
	<div class="inner">
        .inner<br/>FIXED CONTENT<br/>
        <img src="https://www.gstatic.com/hostedimg/eff3539d8c3c3c70_landing" style="width:50%"/>
    </div>
    <div class="floatbox">
        .floatbox<br/>FLOATS ON TOP
    </div>
</div>

CSS

.wrap{
    margin-right:0px;
    padding:5px;
    width:140%;
    background:#b5e7dc;
    border:solid 1px black;
    overflow:hidden;
    display: flex;
    cursor:pointer;
}
.inner{
    padding:50px;
    background:#c0dce6;
    border:dotted 1px black;
}
.floatbox{
    position:relative;
    width:40%;
    right:-5%;
    float:right;
    background:#c8e5df;
    border:dashed 1px black;
    z-index:1;
    cursor:initial;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

JavaScript

states = [ false ];

$(document).ready(function() {
	$(".wrap").click(function() {
        var _id=$(this).attr('data-id');
       	if (states[_id] == true){
        	$(".floatbox")[_id].style.cssText="right:-5%;";
         	states[_id]=false;
		}
        else {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="right:20%;";
            states[_id] = true;
        }
	});
});