title: Animate DIVs hide and show
body: <pre><code>&lt;script&gt;
          function hideBox(num, perc) {
              if(perc == undefined)
                  perc = 100;
  
              if(perc-- &gt; 0)
                  setTimeout(function(){
                      document.getElementById('box'+num).style.width = perc + 'px'; 
                      hideBox(num,perc);
                  }, 1);
              else
                  document.getElementById('box'+num).style.display = 'none'; 
          }
  &lt;/script&gt;
  &lt;div id="main"&gt;
  &lt;div class="box" id="box1" onclick="hideBox(1)"&gt;Box 1&lt;/div&gt;
      &lt;div class="box" id="box2" onclick="hideBox(2)"&gt;Box 2&lt;/div&gt;
      &lt;div class="box" id="box3" onclick="hideBox(3)"&gt;Box 3&lt;/div&gt;
      &lt;div class="box" id="box4" onclick="hideBox(4)"&gt;Box 4&lt;/div&gt;
      &lt;div class="box" id="box5" onclick="hideBox(5)"&gt;Box 5&lt;/div&gt;
      &lt;div class="box" id="box6" onclick="hideBox(6)"&gt;Box 6&lt;/div&gt;
      &lt;div class="box" id="box7" onclick="hideBox(7)"&gt;Box 7&lt;/div&gt;
      &lt;div class="box" id="box8" onclick="hideBox(8)"&gt;Box 8&lt;/div&gt;
      &lt;div class="box" id="box9" onclick="hideBox(9)"&gt;Box 9&lt;/div&gt;
      &lt;div class="box" id="box10" onclick="hideBox(10)"&gt;Box 10&lt;/div&gt;
      &lt;div class="box" id="box11" onclick="hideBox(11)"&gt;Box 11&lt;/div&gt;
      &lt;div class="box" id="box12" onclick="hideBox(12)"&gt;Box 12&lt;/div&gt;
      &lt;div class="box" id="box13" onclick="hideBox(13)"&gt;Box 13&lt;/div&gt;
      &lt;div class="box" id="box14" onclick="hideBox(14)"&gt;Box 14&lt;/div&gt;
       &lt;div class="mid" id="mid" &gt;Box mid&lt;/div&gt;
      &lt;div class="box" id="box15" onclick="hideBox(15)"&gt;Box 15&lt;/div&gt;
      &lt;div class="box" id="box16" onclick="hideBox(16)"&gt;Box 16&lt;/div&gt;
      &lt;div class="box" id="box17" onclick="hideBox(17)"&gt;Box 17&lt;/div&gt;
      &lt;div class="box" id="box18" onclick="hideBox(18)"&gt;Box 18&lt;/div&gt;
      &lt;div class="box" id="box19" onclick="hideBox(19)"&gt;Box 19&lt;/div&gt;
      &lt;div class="box" id="box20" onclick="hideBox(20)"&gt;Box 20&lt;/div&gt;
      &lt;div class="box" id="box21" onclick="hideBox(21)"&gt;Box 21&lt;/div&gt;
      &lt;div class="box" id="box22" onclick="hideBox(22)"&gt;Box 22&lt;/div&gt;
      &lt;div class="box" id="box23" onclick="hideBox(23)"&gt;Box 23&lt;/div&gt;
      &lt;div class="box" id="box24" onclick="hideBox(24)"&gt;Box 24&lt;/div&gt;
      &lt;div class="box" id="box25" onclick="hideBox(25)"&gt;Box 25&lt;/div&gt;
      &lt;div class="box" id="box26" onclick="hideBox(26)"&gt;Box 26&lt;/div&gt;
      &lt;div class="box" id="box27" onclick="hideBox(27)"&gt;Box 27&lt;/div&gt;
      &lt;div class="box" id="box28" onclick="hideBox(28)"&gt;Box 28&lt;/div&gt;
      &lt;div class="box" id="box29" onclick="hideBox(29)"&gt;Box 29&lt;/div&gt;
      &lt;div class="box" id="box30" onclick="hideBox(30)"&gt;Box 30&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ramswarnak/eUUpJ/2/" rel="nofollow">Demo</a></p>
  
  <p>In the above demo, you can see, when I click box it hide.  And you can see the "mid box" is moving forward. </p>
  
  <p>But I need, when I click on box, it  must be hide and appear at the end of the <code>div</code>s (after the box 30). And "mid box" must not be moving, it must be always at the center of the <code>#main</code>.</p>
  
  <p>And in the demo you can see there are spaces, that boxes not fix. but don't need that spaces. I need all <code>div</code>s around "mid" box without spaces.</p>
  
  <p>And all boxes must not be move out from the <code>#main</code>.</p>