title: move div to index position
body: <p>I have three divs on my page.</p>
  
  <p>You can see sample here- <h2><a href="http://jsfiddle.net/stackmanoz/YrsAL/2/" rel="nofollow">Fiddle</a></h2></p>
  
  <p>On this page i am fading divs on click. Everything goes fine according to what i assumed.</p>
  
  <p>Now if i click on a div tab, all its siblings are fading Out and fading-In again on show all button click. </p>
  
  <p>When div goes hide, then it comes to left position that is default. But i want that div which i click should go always at middle of the page. So i tried giving it index position of second-child but that is not working.</p>
  
  <p>How can i get index position of second child for moving box at middle?</p>
  
  <p><strong>jQuery-</strong></p>
  
  <pre><code>$(function () {
          var index = $('.span4:nth-child(2)').index();
          $('.container .row-fluid .span4 ').click(function () {
              $(this).show().siblings().fadeOut();
              $(this).css('margin', index);
          });
          $('.show-all').click(function () {
              $('.span4').fadeIn();
          });
      });
  </code></pre>