Off a div when click another div

My JS code:

<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
$(".out").click(function(){
$(".content",this).stop().animate({
left:'292px',
});
});

Here "content" is in "out" div. When I click on "out" then the css of "content" becomes left : 292px.

Now I want when I click on next "out" div then the previes div "content" will be left : 0 (left zero) like

$(".pic_boxes").click(function(){
$(".pic_box_content",this).stop().animate({
left:0,
});
});

How I can do it?