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)?

shaan
  • 351
  • 2
  • 15

1 Answers1

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);
})
Gabriel Alejandro López López
  • 660
  • 5
  • 15
  • 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 '20 at 14:14
  • Its just using __ternary operator__ to check and assign the new value of the rows attribute. Check this https://gist.github.com/glpzzz/762afe32e8c245216869e9b1bd0aaac0 for the expanded, explanatory version. – Gabriel Alejandro López López Oct 10 '20 at 16:49
  • But check this answer!!! It's event more fancy: https://stackoverflow.com/a/18665152/12115958 – Gabriel Alejandro López López Oct 10 '20 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) – Gabriel Alejandro López López Oct 10 '20 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 '20 at 01:36
  • As a user I really prefer don't having the button and the textarea autoincreases the size when requested (I focus it) – Gabriel Alejandro López López Oct 14 '20 at 13:49