jquery slideToggle acting more like blind

I'm trying to get my sliding div working properly with slideToggle. First off, here is the working url: * Link Removed

The problem I am having with it is I am getting more of a blind effect rather than a slide down effect. I've tried changing the CSS and using negative top margin etc. to no avail. What I am trying to accomplish is basically the same as the Products menu at telerik-dot-com and the All Products menu from within the site. The one at aspnet-ajax/controls/examples/default/ is more related to what I am trying to do via the click function. I realize these may be different, but what I am basically looking for functionality-wise is the div to do more of a slide in instead of a blind down.

Thanks for any help.

Also, to make an addition to this, I would like to fade in the actual contents of the panel once the panel slides in then fade out when clicking the tab to close the panel before sliding up. I've tried adding fadeIn function to the h2 and p but no luck. If anyone wants to chime in on this as well feel free. Thank you!

Solution

Your css should look like below, top attribute can either be calculated on page load or you give a fixed value.

#slidebox {
    margin:0;
    padding:0;
    position:absolute;
    right:40px;
    top:-141px; /*this is the trick*/
    width:auto;
    z-index:100;
}

then on your js what you need to do is as subtenante says playing with 'top' attribute.

var $a = $('a.btn-slide'),
    $slider = $('#slidebox');

$a.click(function(){
   if($a.hasClass('active')){
     $slider.animate({'top':0},400,function(){
        $a.removeClass('active');
     });
   }else{ 
     $slider.animate({'top':'-141px'},400,function(){
        $a.addClass('active');
     });
   }
})

hope this helps, Sinan.