Question

I am trying to do something like this.

• I want to increase the height of textarea when the user clicks a button

For this I have made a button like this <a id="expandText" href="#"> Expand </a> and added the following javascript

$('#expandText').click(function () {
    $('#id_text').animate({ height: "1000px" }, 500);
    //$('#id_text').css( "height","+=85" );
});

I tried two things

1. One was to animate the height of the text box
2. The other was to change the css, but neither of them has worked

Edit:
I tried out all the things that have been given below, but it is still not working. Could it be possible because this textarea has a class = MCeEditor which makes this textarea an editor and not just a normal text area

Answer 1

You say the textarea has the class MCeEditor – so I’m guessing that’s TinyMCE or something of that kind.

If so, use inspect element in whatever browser you’re using (hold down CTRL to get browser context menu if TinyMCE context menu shows up), and navigate your way down through the editor till you find an iframe which is where the writing really happens. If I’m not mistaken, the selector .mceEditor iframe should do.

The reason for all thiss hazzle, is that TinyMCE hides your actual textarea, and creates an editor on its own. As you type into TinyMCE, it puts that text back into your textarea so you can retrieve it as expected from server side. So when you see the MCE editor, you aren’t directly manipulating your textarea as one might expect.