title: Change textarea height on click
body: <p>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.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;textarea class="ta"&gt;&lt;/textarea&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;button&gt;OK&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>textarea{
      height:15px; 
      width: 200px;
  }
  
  .clear{
      clear:both;
  }
  
  button{
      display:none;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>You can see the same code in <a href="http://jsfiddle.net/fZHMF/" rel="nofollow">jsfiddle here</a>. Thank you for any help.</p>