javascript - Jquery - 次の要素がクリックされたときに上にスライドします...別の行にある場合のみ

Question

divを下にスライドさせるクリック機能があります.....次のliをクリックすると、前のdivが上にスライドし、新しいdivが下にスライドしますが、別の行にある場合のみ... .同じ行にある場合、フェードインしたいコンテンツをdivに入れます

これが私が使用しているフィドルです

http://jsfiddle.net/abtPH/3/

ここに私のjQueryがあります

$('li').on('click', function(e){
  $(this).find('.outer').slideToggle();
  $(this).toggleClass('active', 400);
});

ここに私の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>