How To Expand A Textarea On Focus Over The Top Of Other Items Using Jquery Animate

This has been answered many times and many ways for divs and images but I can't find an example of how to do this for a textarea. I want the textarea to expand and not move the oth

Solution 1:

Choose one: a table with position: absolute; or a div with float: left...

From what I can see, with the decision to use a table, must use positon: absolute; because you need to use z-index: and flow-over other elements. Using float: left along with a table will clear floats. Otherwise you could use float: left pretty easily.

See working fiddle:http://jsfiddle.net/digitalextremist/JdA6L/

$(window).load(function () {
    $('textarea.expand').focus(function () {
        $(this).addClass("expanding")
        $(this).animate({
            height: "10em"
        }, 500);
    });
    $('textarea.expand').blur(function () {
        $(this).animate({
            height: "1em"
        }, 500);
        $(this).removeClass("expanding")
    });
});

Added one CSS class:

.expanding {
    position: absolute;
    z-index: 9;
}