Gabriel Alejandro López López (Software Engineer)

How to toggle attribute values using jQuery

- Some ways to toggle the value of an attribute between two options by using jQuery. Go to the last one if you are in a hurry!

I just came across a very simple question on StackOverflow. In the end is how to toggle the value of an attribute using jQuery.

The long version

This is the explanatory version I created when the author of the question requested for an explanation of my original code. Most of the comments are obvious.

$('thebutton').click(function(){
   var currentRows = $('thetextarea').attr('rows'); //obtain the current number of rows in the textarea
   var newRows; //declare a variable to hold the new number of rows
   if(rows == 1){ //if just one...
       newRows = 5; // it should become 5
   }else{ 
       newRows = 1; //else, (not 1), become 1
   }   
   $('thetextarea').attr('rows', newRows); //assign the new value to the rows attribute of the textarea
});

Short version

My original answer was…

//short version, the one in the answer
$('thebutton').click(function(){
   $('thetextarea').attr('rows',  $('thetextarea').attr('rows')==1?5:1);
});

I’ve created a gist for this two versions.

The fancy version (new for me)

I still had the doubt if this could be done easier, and find the next way thanks to this answer:

$('thebutton').click(function(){
   $('thetextarea').attr('rows',  function(index, attr){
       return attr == 1 ? 5 : 1;
   });
});

Just learnt a new thing today. I can sleep in peace.