Question

I’ve defined a textarea height and button is set to display none. I want to change the the textarea height (to a fixed height) and show the button if i click inside the textaea.

HTML:

<div class="wrap">
    <textarea class="ta"></textarea>
    <div class="clear"></div>
    <button>OK</button>
</div>

CSS:

textarea{
    height:15px; 
    width: 200px;
}

.clear{
    clear:both;
}

button{
    display:none;
}

As you can see that the textarea has height 15px. So, as soon i click in it, i want to change the height to 100px and also want to show the button.

You can see the same code in jsfiddle here. Thank you for any help.

Answer 1

Just bind to the click event of the textarea:

$("textarea").click(function() {
   $(this).height(100);
   $("button").show();
});

Here’s an updated fiddle. You may want to make those selectors more specific so as not to apply to every textarea and button element on the page.