Hey all, okay i have a problem, i want to create buttons with + and - on them, and when the + is clicked my textarea will expand in height by 20px, and when the - button is clicked it will go back to the original value.

lets say the original value is 80px, here is what i am working with below so you can get an idea what codes i will need done:

Code:
<textarea name='message' rows="6" cols="35" style="width:80%; height:80px; overflow:auto" wrap='virtual' tabindex='1' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea>


(it says rows=6 i thought this was the height? but anyway, it is using the style=80px whne i apply it to a webpage, so whichever is easier to code, i dont mind, so long as whatever the height is, it will be like 80px and 100px when expanded.)


and here are my buttons:
<input type="button" name='ec_plus' id='add_plus' value="+" onclick="add(100,'message');" class="liteoption" style='width: 25px;'/>
<input type="button" name='ec_minus' id='add_minus' value="-" onclick="add(-100,'message');" class="liteoption" style='width: 25px;'/>
i have just added id's and onClick just so you get the point, as the idea i got this from used those values.

If anyone can help me in writing a javascript code for this little expand/contract textarea that would be greatly appreciated.
it can use js file or ajax, whatever u think is easy and best.

it would be better not to put the javascript in the header though, only if linking to a js file.

HELP WOULD BE SO MUCH APPRECIATED, i have been searching for a solution for 11 hours - no joke, and playing around myself with no result.

Thanks in advance to all the gurus willing to giv a hand!