title: How to add Sliding affect to Jquery Top Panel
body: <p>I am using a top Panel Drop Down. Something similar to this <a href="http://www.yootheme.com/tools/extensions/yootoppanel" rel="nofollow">http://www.yootheme.com/tools/extensions/yootoppanel</a></p>
  
  <p>Initially it was in mootools. But i was having issues in IE8. So i thought to change it to Jquery.
  I have made the slidedown and slide up functionality. But i am unable to add the sliding affect. 
  As far as coding is concerned, I have called a function on click event of the button. Which adds height, position etc when sliding down and removes it while sliding up. </p>
  
  <pre><code>function toggle(articleheight,height) {
          if(height &lt; 0){
          slideIn(articleheight);
          }
      else{
          slideOut(articleheight);
          }
       }
  function slideIn(articleheight){
      jQuery(".panel").css("margin-top",0);
      jQuery(".panel-wrapper").css("height",articleheight);
  
  }
  function slideOut(articleheight){
      jQuery(".panel").css("margin-top",-articleheight);
      jQuery(".panel-wrapper").css("height",0);
  
  }
  </code></pre>
  
  <p>My HTML code</p>
  
  <pre><code>&lt;div id="toppanel" class="toppanel"&gt;
  
          &lt;div class="panel-container"&gt;
              &lt;div class="panel-wrapper"&gt;
                  &lt;div class="panel"&gt;
                      &lt;div class="content"&gt;
                          MY CONTENT
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="trigger" style="&lt;?php echo $css_left_position ?&gt;"&gt;
                  &lt;div class="trigger-l"&gt;&lt;/div&gt;
                  &lt;div class="trigger-m"&gt;Panel&lt;/div&gt;
                  &lt;div class="trigger-r"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Please help</p>