un expand elastic plugin

Question

I am using elastic plugin here is the jQuery i am using for it:

 <script type="text/javascript">
    jQuery(function(){
    jQuery('textarea').elastic();
    });
 </script>

I have 5 textarea that i am using in code. So when user is at textarea1 lets say he press enter 10 times and expands the textarea. Is there a way when he clicks on second textarea or clicks outside of textarea1 the textarea1 goes back to its orignal size?

Also can opposite of this be achived also? If textarea1 has 3 rows. Can on click on text area increase the size to 5 rows?

Answer 1

There is probably an elegant way to unbind/rebind elastic's events, but for a quick brute-force override you can use the !important attribute to override the CSS on the textarea's height.

Create a textarea with a rows attribute (so we know what size to revert the textarea to):

<textarea rows="4"></textarea>

Attach focus/blur functions to the textarea to override/reset the height:

jQuery(function() {
    $('textarea').focus(function() {
        // remove any height overrides
        $(this).css('height', '');
        // make it elastic
        $('textarea').elastic();
    });
    $('textarea').blur(function() {
       // override the height on the textarea to force it back to its original height
       $(this).css('height', $(this).attr("rows") + 'em !important'); 
    });
});