How to dynamically re size Jquery resizable

Question

How do we dynamically re size the Jquery re sizable?

<div id="siteOptWrap">


</div>


   $('#siteOptsWrap').resizable({
        distance: 10,
        handles: "n",
        ghost: true,
        animate: true,
        maxHeight: '600',
        //animateDuration: "fast",
    });

--here is where I am trying to re size

 $('#siteOptsWrap').resizable().resize({ 'height': '25px' });

I would really like to be able to ease the resize. What I am doing I've got a menu that I want to show on about 30% of the screen and about 5 seconds after the window loads I want to ease the menu down.

--Here is an image that shows the menu at the very bottom of the page, which is a tabs jquery control that is wrapped in a jquery resizeable.

I need to ease that bottom menu down after about 5 seconds so that the user does not have to do that to start working.

Answer 1

If you want to change the height of the element you need to use .css(), not .resize which is used to add resize event handler.

$('#siteOptsWrap').resizable().css({ 'height': '25px' });

Demo: Fiddle