Learning Js states

click on left div moves right div, click on right div moves left div

by sach_a

HTML

<div class='container'>
<table style="width:100%;">
<tr><td style="width:33%;">block-left</td><td style="width:33%;">block-mid</td><td style="width:33%;">block-right</td></tr>
</table> 
<div class='block-left' data-id='0'>left 0</div> 
<div class='block-mid' data-id='0'>mid 0</div>
<div class='block-right' data-id='0'>right 0</div>
<div class='clear'></div>

<div class='block-left' data-id='1'>left 1</div> 
<div class='block-mid' data-id='1'>mid 1</div>
<div class='block-right' data-id='1'>right 1</div>
<div class='clear'></div>

<div class='block-left' data-id='2'>left 2</div> 
<div class='block-mid' data-id='2'>mid 2</div>
<div class='block-right' data-id='2'>right 2</div>
<div class='clear'></div>

<div class='block-left' data-id='3'>left 3</div> 
<div class='block-mid' data-id='3'>mid 3</div>
<div class='block-right' data-id='3'>right 3</div>
<div class='clear'></div>

</div>

CSS

.container {
    width:100%;
    border:1px solid green;
    text-align:center;
    font-size:18px;
    padding-top:2%;
    padding-bottom:2%;
}
.block-left {
    display:inline-block;
    float:left;
    border:1px solid green;
    width:10%;
    height:32%;
	  margin-left:12%;
    cursor:pointer;
}
.block-right {
    display:inline-block;
    float:right;
    border:1px solid green;
    width:10%;
    height:32%;
	  margin-right:12%;
    cursor:pointer;
}
.block-mid {
    position:absolute;
    border:1px solid green;
    width:10%;
    margin-left:43.5%;
    cursor:pointer;
}
.clear {
    clear:both;
}

JavaScript

function rc()
{
}
statesL = [ true, true, true, true ];
statesR = [ true, true, true, true ];
statesM = [ true, true, true, true ];
$(document).ready(function() {
	$(".block-left").click(function() {
        var _id=$(this).attr('data-id');
       	if (statesL[_id]==true){
        	$(".block-right")[_id].style.cssText="margin-right:25%;-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;";
         	statesL[_id] = false;
		}
        else {
        	var _id=$(this).attr('data-id');
        	$(".block-right")[_id].style.cssText="margin-right:12%;-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;";
            statesL[_id] = true;
        }
	});

    $(".block-right").click(function() {
        var _id=$(this).attr('data-id');        
        if (statesR[_id]==true){
			$(".block-left")[_id].style.cssText="margin-left:25%;-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;";
            statesR[_id] = false;
		}
    	else {
        	var _id=$(this).attr('data-id');
        	$(".block-left")[_id].style.cssText="margin-left:12%;-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;";
            statesR[_id] = true;
        }
	});
  
  	$(".block-mid").click(function() {
        var _id=$(this).attr('data-id');
        
        if (statesM[_id]==true) {
          if ((statesR[_id]==true) && (statesL[_id]==true)) {
					$(".block-left")[_id].style.cssText="margin-left:25%;-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;";
            statesR[_id] =...