DEV Community

Gabriel Alejandro López López
Gabriel Alejandro López López

Posted on • Originally published at glpzzz.dev on

How to toggle attribute values using jQuery

#jquery #toogle #attribute

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 });
Enter fullscreen mode Exit fullscreen mode

Short version version

My original answer was...

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

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; }); });
Enter fullscreen mode Exit fullscreen mode

Just learnt a new thing today. I can sleep easy.

Top comments (0)