How to change the number of rows in the textarea using jQuery

Question

I have a textarea with 5 lines. I want to show only one line and on focus it should show remaining 4 lines.

Answer 1

You can try something like this:

     $(document).ready(function(){      $('#moo').focus(function(){         $(this).attr('rows', '4');     }); }); 

where moo is your textarea.

Answer 2

jQuery(function($){   $('#foo').focus(function(){     $(this).attr('rows',5);   }).blur(function(){     $(this).attr('rows',1);   }); }); 

Or, using less jQuery, less typing, and getting a hair more performance:

jQuery(function($){   $('#foo')     .focus(function(){ this.rows=5 })     .blur( function(){ this.rows=1 }); });