0

In my HTML table I am adding rows dynamically.

enter image description here

As can be seen in the above image, one of the columns (in each row) has a button (OpenPad) which I am using to increase the height of the textarea like this:

$('#'+ constructeIdQuesFld).height(65);

The aim of this arrangement is to conserve space. The result is as seen in the following image:

enter image description here

However, if I want to toggle the button action from the default textarea height to increased height and back to default, it is not happening. I have tried the toggle action using the following:

$('#'+ constructeIdQuesFld).toggle().height(65);

When the button OpenPad is clicked the 2nd time, the textarea is hidden completely, instead of reverting back to the default state. This is stated succinctly here:

The toggle() method toggles between hide() and show() for the selected elements.

enter image description here

Under the circumtances, how do I toggle between two states of the textarea (from default size to the intended one and back)?

1
  • could you share the snippet of this , so others get a head start for solving this? Oct 10, 2020 at 4:52

1 Answer 1

1

You can use textarea instead of input[type=text]. Then the toggle function is about changing the value of the rows attribute of the corresponding textarea.

$('thebutton').click(function(){
   $('thetextarea').attr('rows',  $('thetextarea').attr('rows')==1?5:1);
})
6
  • The field in question is already a textarea. And ... the good part is it's working. Will it be okay if I ask what is the code doing? Thanks.
    – shaan
    Oct 10, 2020 at 14:14
  • Its just using ternary operator to check and assign the new value of the rows attribute. Check this gist.github.com/glpzzz/762afe32e8c245216869e9b1bd0aaac0 for the expanded, explanatory version. Oct 10, 2020 at 16:49
  • But check this answer!!! It's event more fancy: stackoverflow.com/a/18665152/12115958 Oct 10, 2020 at 16:56
  • Suggestion: for the sake of usability, I would like to have the toggle size functionality when focusing the textarea instead of clicking in a external button. If unfocus, return to original 1 (rows=1) Oct 10, 2020 at 17:56
  • Good suggestion. Thanks. I will certainly try this out. BTW, I had thought of the button as a kind of flag to inform the user about the availability of the functionality. To draw user attention. Something akin to SAP functionalities / UI. I want to extend this functionality in other areas also. So, let's see. Thanks again for all the help.
    – shaan
    Oct 11, 2020 at 1:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.