[tsigel]

<style>

  .block.moved {
    right: 300px;
  }

 .blocks.moved {
    right: 260px;
  }

 .block {
     background: red;
     width: 100%;
     height: 100px;
     position: absolute;
     right: 0;
     z-index:2;
	 top: 35px;
     transition: right 1s ease;
     -webkit-transition: right 1s ease;
     -moz-transition: right 1s ease;
     -o-transition: right 1s ease;
     -ms-transition: right 1s ease;
  }
  .blocks{
 	 background: black;
     width: 300px;
     height: 100px;
     position: absolute;
     right: 0;
     top: 35px;
	 z-index:1;
     transition: right 1s ease;
     -webkit-transition: right 1s ease;
     -moz-transition: right 1s ease;
     -o-transition: right 1s ease;
     -ms-transition: right 1s ease;
  }
  .a{
  	background:green;
	width:30px;
	height:30px;
	position:absolute;
	top:20px;
	right:20px;
  }

</style>

<div>


	<div class="block">
		<a class="a"></a>
	</div>
	<div class=blocks>
		<a class="a" style="background:blue;"></a>
	</div> 
   	
</div>


<script>

[].forEach.call(document.querySelectorAll(".a"), function (elem) {
elem.addEventListener("click", function () {
  this.parentNode.classList.toggle("moved");
}, false)});

</script>