How to add Sliding affect to Jquery Top Panel

Question

I am using a top Panel Drop Down. Something similar to this http://www.yootheme.com/tools/extensions/yootoppanel

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.

function toggle(articleheight,height) {
        if(height < 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);

}

My HTML code

<div id="toppanel" class="toppanel">

        <div class="panel-container">
            <div class="panel-wrapper">
                <div class="panel">
                    <div class="content">
                        MY CONTENT
                    </div>
                </div>
            </div>

            <div class="trigger" style="<?php echo $css_left_position ?>">
                <div class="trigger-l"></div>
                <div class="trigger-m">Panel</div>
                <div class="trigger-r"></div>
            </div>
        </div>

    </div>

Please help

Answer 1

I would consider using the jQuery sliding effects

Examples are included in the api reference

http://api.jquery.com/category/effects/sliding/

I added a quick example, you can easily make the height variable:

http://jsfiddle.net/dmpWa/19/

Answer 2

As suggested, slide effect. jsFiddle If you're coming from mootools to jquery you might want to stop bothering with dozen of functions. Simple declarative jquery will kill easy things like this one.

<div class="topPanel"></div>
<div class="topTab"><a href="#">Top Panel</a></div>

...

$('.topTab a').toggle(function(){
    $(this).parent().prevUntil('.topTab').slideDown();
},function(){
    $(this).parent().prevUntil('.topTab').slideUp();
});