Through javascript, I am able to adjust the height of my element from 0 to auto as I was unable to accomplish this using CSS.
/* Function for animating height: auto */
function autoHeightAnimate(element, time){
var curHeight = element.height(), // Get Default Height
autoHeight = element.css('height', 'auto').height(); // Get Auto Height
element.height(curHeight); // Reset to Default Height
element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height
}
However, when resizing my Chrome window, the element's height does not automatically change. It only adjusts after clicking on one of the labels. View DEMO here.
Is there a way to achieve this functionality through CSS? If not, how can I use javascript/jQuery to make the element's height update dynamically as I scale my browser window?