translation css

by ced1

HTML

<div>
    <h2> Click the blocks to add/remove the "moved" class </h2>
<div class="block" id="red"></div>
<div class="block" id="green"></div>
</div>

CSS

div.block {
    margin:20px;
    width:50px; 
    height:50px;
    position:relative;
}

#red { background-color: red}
#green { background-color: green}

.moved {
  left:20px;
}

JavaScript

$(function(){
    $(".block").click(function(){
        $(this).toggleClass("moved");        
    }); 
});