CODEWITHSUNDEEP
jquerycssslideslidetoggle
H Bellamy
H Bellamy

Reputation: 22715

Jquery slide toggle makes my text area jump down

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;
});

Upvotes: 0

Views: 1213

Answers (1)

jQuerybeast
jQuerybeast

Reputation: 14510

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.

Upvotes: 1

Related Questions