Question

I am using this jQuery plugin: http://api.jquery.com/slideToggle/

I have this code:

<div id=panel><form action="postit.php" method="get" name="post" style = "margin-left:40px;">
<textarea required cols="35" rows="5" name="status" class="resizable" id = "statuses"></textarea>
<input type="submit" name="submit" value="FOO!"/>
</form></div>
<p class="slide"><a href="#" class="btn-slide">FOO</a></p>

Basically, this code means that the panel should slide down, but when I run it, the div goes down smoothly, but the textarea goes well, then suddenly jumps up to the top.

What can I do to solve this, is it a bug in the api, or something wrong in my code?

Thanks, I have tried to be as clear as possible.

Here is the css for the textarea, in case that might be causing the problem, sorry if this is irrelevant, but someone might have this problem too.

resizable-textarea textarea {
display:block;
margin-bottom:0pt;
height: 20%;
width:90%;
}

EDIT: Here is the javascript(sorry):

$(".btn-slide").click(function(){
    $('textarea.resizable:not(.processed)').TextAreaResizer();
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

Answer 1

Works fine for me: http://jsfiddle.net/SHKNQ/

It seems that there is a problem TextAreaResizer which makes it slide back down. Notice in my fiddle I’ve disabled it and its working fine. If you include TextAreaResizer I can find a solution.