Make a slide down textarea in HTML

css, html, javascript, jquery, layout

Solution

Instead of manually messing with the CSS values, simply toggle a class. This allows you to easily play with absolute positioning without having messed-up JS. See demo here: http://jsfiddle.net/8Qa3C/1/

Instead of your current code, use that:

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
    });
});

Then you can have some simple CSS like this:

.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
}

I also added a `position: relative;` to `td`.

Problem

I want to make an HTML table with a lot of text input areas (`textarea`) that, when clicked on, expand downwards. Right now, when the textarea element gets clicked it expands fine, but it messes up the table layout in the process. I want something like this Instead of this ugly thing I'm getting now Here is my current code

Original source