Question: I have a Input box whose dimensions i change on focus. 

I have it working like below 

[JSFIDDLE](http://jsfiddle.net/kd5zndd7/)

Here is the One line html

```
<input id="box" style="width:50;"></input>

```

Here is the Jquery.

```
$("#box").focus(function () {
    /*to make this flexible, I'm storing the current width & height in an attribute*/
    $(this).attr('data-defaultwidth', $(this).width());
    $(this).attr('data-defaultheight', $(this).height());
    $(this).animate({
        width: 400
    }, 'slow');
    $(this).animate({
        height: 300
    }, 'slow');
}).blur(function () {
    /* lookup the original width */
    var w = $(this).attr('data-defaultwidth');
    var h = $(this).attr('data-defaultheight');
    $(this).animate({
        width: w
    }, 'slow');
    $(this).animate({
        height: h
    }, 'slow');
});

```

The Problem with this as you can see is that it doesnt do what it is supposed to do. Although the dimensions of the input box change, it still remains a single line input. How can i convert this into a multiline Textarea? I havee seen great answer [jQuery change hidden input type to textarea](https://stackoverflow.com/questions/9112409/jquery-change-hidden-input-type-to-textarea#9112502), but i need the Textarea to convert back into inout on blur. How do i do that?

Answer: 
Why not just let the input be a textarea from the get go and just change the dimensions in the same manner? <http://jsfiddle.net/w5206dtr/>

```
<textarea id="box" style="width:50;"></textarea>

```
```
<textarea id="box" style="width:200px;height:20px;resize:none"></textarea>

```

Just change it into text area like above. Please see the updated fiddle [**here**](http://jsfiddle.net/kd5zndd7/1/).