Animate css width or height to auto in JQuery

I recently wrapped up a project where we wanted to reveal only a portion of an HTML element and have it fully display on-click (In our case, it was a container that held a number of keyword tags). We wanted something similar to slideToggle(), however, slideToggle() hides and reveals the entire element.

What we needed was a div that could animate() from a fixed size to “auto” (since the div contents would vary in length). Unfortunately, JQuery can’t seem to calculate width:”auto” or height:”auto”. After looking around without an answer, I came up with a solution–place the variable div into a holder div and measure the holder’s properties. Here’s the example; code below.

	$(document).ready(function() {
		var startHeight = $('.box').height();
		$('.btn').click(function() {
		   // find nearby elements
		   var box = $(this).parent().find('.box');
		   var inner = box.children('.inner');

		   // collect current heights
		   var innerH = inner.height();
		   var boxH = box.height();

		   // calculate new height
		   var newHeight = parseInt(boxH) + parseInt(innerH);

		   // determines whether to toggle height
		   newHeight = boxH > startHeight ? startHeight : newHeight;
		   box.animate({height:newHeight});
		});
	});

You’ll notice I’m setting a variable startHeight at the beginning of the script to remember the starting CSS property. This can then be referenced by the button click function to revert the size back. Here’s the CSS:

.inner {background:#ccc;height:auto;padding:10px;overflow:hidden;}
.inner ol{margin:0;}
.box{height:30px;overflow:hidden;}

Because I’m dealing with multiple result sets on the same page, I made all of the CSS into class rather than id selectors. That’s also why I’m using this relative selector in Javascript: $(this).parent().find(‘.box’);
Feel free to use, and comment if there’s something that can be improved upon here.