title: Jquery animation show div from top to bottom
body: <p>I need change an animation code in jquery. The code open a div with an animation from left to right and I need that this happen from top to bottom. </p>
  
  <p>I put a link to share the code for more information.</p>
  
  <p><a href="http://jsfiddle.net/HDWVH/" rel="nofollow">http://jsfiddle.net/HDWVH/</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- Botón que activa el panel --&gt;
  &lt;a href="#" id="abre_tab"&gt;
  &lt;div id="tab"&gt; 
      &lt;div id="tab_interna"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  &lt;/a&gt;
  &lt;!-- Panel oculto --&gt;
  &lt;div id="panel"&gt;
  &lt;div class="contenido"&gt;
      &lt;h3&gt;Download&lt;/h3&gt;
  &lt;/div&gt;    
  &lt;/div&gt;
  &lt;h1&gt;WEB'S BODY&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  {#tab {
  width:50px;
  height:40px;
  position: fixed;
  top: 0;
  left: 35%;
  display:block;
  cursor:pointer;
  background-color:#232526;
  border-radius: 0 0 10px 10px;
  padding: 0 5px 5px 5px; 
  }       
  #tab_interna {
  border-radius: 0 0 5px 5px;
  width: 100%;            
  height: 100%;
  background: #CCC url('arrow-down.png') no-repeat center center;
  }               
  #tab_interna:hover {
  background-position: 9px 10px;
  }
  .expandida {
  background: #CCC url('arrow-up.png') no-repeat center center !important;
  }       
  .expandida:hover {
  background-position: 9px 1px !important;
  }
  
  #panel {
  position: fixed;
  top: 0;
  left: 30%;
  background-color:#CCC;
  height:100px;
  width:0px;
  font: 18px Arial;
  color: #707275;
  text-align: center;
  border-radius: 0 0 15px 15px;
  }
  #panel h3 {
  margin: 0;
  margin-bottom: 15px;
  text-transform: uppercase;
  }
  
  #panel .content {
  width:320px;
  margin: 5px auto;
  }
  }
  
  
  {$(function(){
  var $contenido = $(".contenido").hide(),
    $tab = $('#tab'),
    $tab_interna = $('#tab_interna'),
    $panel = $('#panel')
    $abre_tab = $('a#abre_tab');
  
  $abre_tab.on('click',function(e){ e.preventDefault();});
  
  var toggle = true;
  $tab.on('click', function() {
  
      if (toggle) {
          $tab
              .stop()
              .animate({
                  top: "104px",
              },500, function (){
                  $tab_interna.addClass('expandida');
              });
          $panel
              .stop()
              .animate({
                  width: "200px",
                  opacity: 0.8
              }, 500, function(){
                  $contenido.slideDown('slow');
              });    
      } else {
          $contenido.slideUp('slow', function() {
              $tab
                  .stop()
                  .animate({
                      top: "0"
                  },500, function() {
                      $tab_interna.removeClass();
                  });
              $panel
                  .stop()
                  .animate({
                      width: "0",
                      opacity: 0
                  },500);    
          });
      }
      toggle = !toggle;
      });
      });
      }
  </code></pre>
  
  <p>Thanks.</p>