Jquery - Slide up when next element is clicked

Jquery - Slide up when next element is clicked

I have a click function that makes a div slide down.....when i click on
the next li i want the previous div to slide back up and the new div to
slide down
heres the fiddle im working with
http://jsfiddle.net/abtPH/3/
heres my jQuery
$('li').on('click', function(e){
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
heres my html
<ul style="list-style: none;">
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px;
padding: 10px; text-align: center; color: #cfcfcf;"> 156px X
156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px;
padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>
<div class="outer">
<div class="inner">
</div>
</div>
</li>
</ul>